<template>
  <div
    :style="`transform-origin: left top; transform: scale( ${pageScale} ) translateX( ${pageOffset}px)`"
    class="ep-box"
  >
    <div class="headline">
      <p class="text">武义县一般工业固废智管平台</p>
      <div class="date">
        <div>{{ time }}</div>
        <p>
          <span>{{ day }}</span>
          <span>{{ week | weekCN }}</span>
        </p>
      </div>
    </div>
    <div class="container">
      <div class="left">
        <div class="title">全县产废评价</div>
        <div class="company">
          <div class="highqualified">
            <div id="highqualified-chart"></div>
            <p>注册企业</p>
           <!-- <p>
              <span
                ><ICountUp
                  :delay="countDelay"
                  :endVal="parseFloat(highqualifiedInfo.count) || 0"
                  :options="{ duration: 3, useGrouping: false }"
                  @ready="countReady1"
              /></span>
              <i>家</i>
            </p>-->
          </div>
          <div class="qualified">
            <div id="qualified-chart"></div>
            <p>清运企业</p>
            <!--<p>
              <span
                ><ICountUp
                  :delay="countDelay"
                  :endVal="parseFloat(qualifiedInfo.count) || 0"
                  :options="{ duration: 3, useGrouping: false }"
                  @ready="countReady1"
              /></span>
              <i>家</i>
            </p>-->
          </div>
          <div class="unqualified">
            <div id="unqualified-chart"></div>
            <p>清运比例</p>
            <!--<p>
              &lt;!&ndash;<span&ndash;&gt;
                &lt;!&ndash;&gt;<ICountUp&ndash;&gt;
                  &lt;!&ndash;:delay="countDelay"&ndash;&gt;
                  &lt;!&ndash;:endVal="parseFloat(unqualifiedInfo.count)||0"&ndash;&gt;
                  &lt;!&ndash;:options="{ duration: 3, useGrouping: false }"&ndash;&gt;
                  &lt;!&ndash;@ready="countReady1"&ndash;&gt;
              &lt;!&ndash;/></span>&ndash;&gt;
                <span> {{ unqualifiedInfo.count }} </span>
              <i>%</i>
            </p>-->
          </div>
        </div>
        <div class="title">
          <p>违法态势</p>
          <div style="margin: 0 40px 10px 0;">
                <span
                        :class="{ active: boardStatus1 === '1' }"
                        @click="checkBoardStatus('1','boardStatus1')"
                >违法态势</span
                >
            <span
                    :class="{ active: boardStatus1 === '2' }"
                    @click="checkBoardStatus('2','boardStatus1')"
            >违法线索</span
            >
            <span
                    :class="{ active: boardStatus1 === '3' }"
                    @click="boardStatus1('3','boardStatus1')"
            >进度排行</span
            >
          </div>
        </div>

        <div class="lllegal">
          <div id="lllegal-chart" v-if="boardStatus1 === '1'" key="1"></div>
          <div class="waste-list" style="padding: 0;" v-else-if="boardStatus1 === '2'" key="2">
              <div class="waste-header">
                  <i>序号</i>
                  <label>街道</label>
                  <span>线索数</span>
              </div>
              <vue-seamless-scroll
                      :data="clueList"
                      :class-option="wasteOption"
                      class="waste-wrap"
              >
                  <ul>
                      <li v-for="(item, index) in clueList" :key="index">
                          <i>{{ index + 1 }}</i>
                          <label>{{ item.streetCodeName }}</label>
                          <span>{{ item.clueNum }}</span>
                      </li>
                  </ul>
              </vue-seamless-scroll>
          </div>
          <div class="waste-list" style="padding: 0;" v-else key="3">
            <div class="waste-header">
              <i>序号</i>
              <label>街道</label>
              <p>平均处理时间</p>
            </div>
            <vue-seamless-scroll
                    :data="rateList"
                    :class-option="wasteOption"
                    class="waste-wrap"
            >
              <ul>
                <li v-for="(item, index) in rateList" :key="index">
                  <i>{{ index + 1 }}</i>
                  <label>{{ item.streetCodeName }}</label>
                  <p>{{ item.dealDays }}<i></i></p>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
        <div class="title">各乡镇产废企业情况</div>
        <div class="waste">
          <div class="waste-info">
            <div class="info-item1">
              <img src="../assets/images/icon10.png" />
              <div>
                <label>清运司机数</label>
                <p>
                  <span
                    ><ICountUp
                      :delay="countDelay"
                      :endVal="parseFloat(wasteInfo.driver) || 0"
                      :options="{ duration: 3, useGrouping: false }"
                      @ready="countReady1" /></span
                  >个
                </p>
              </div>
            </div>
            <div class="info-item2">
              <img src="../assets/images/icon11.png" />
              <div>
                <label>订单数</label>
                <p>
                  <span
                    ><ICountUp
                      :delay="countDelay"
                      :endVal="parseFloat(wasteInfo.order) || 0"
                      :options="{ duration: 3, useGrouping: false }"
                      @ready="countReady1" /></span
                  >条
                </p>
              </div>
            </div>
            <div class="info-item3">
              <img src="../assets/images/icon12.png" />
              <div>
                <label>产废量</label>
                <p>
                  <span
                    ><ICountUp
                      :delay="countDelay"
                      :endVal="parseFloat(wasteInfo.count) || 0"
                      :options="{ duration: 3, useGrouping: false }"
                      @ready="countReady1" /></span
                  >吨
                </p>
              </div>
            </div>
          </div>
          <div class="waste-list">
            <div class="waste-header">
              <i>序号</i>
              <label>地区</label>
              <span>订单数</span>
              <p>产废量</p>
            </div>
            <vue-seamless-scroll
              :data="wasteList"
              :class-option="wasteOption"
              class="waste-wrap"
            >
              <ul>
                <li v-for="(item, index) in wasteList" @click="checkGarbageDialogxz(item)" :key="index">
                  <i>{{ index + 1 }}</i>
                  <label>{{ item.streetCodeName }}</label>
                  <span>{{ item.order }}</span>
                  <p>{{ item.count }}<i>吨</i></p>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="total-info">
          <div class="info-item">
            <img src="../assets/images/icon1.png" />
            <div>
              <label>产废企业数</label>
              <p>
                <span
                  ><ICountUp
                    :delay="countDelay"
                    :endVal="parseFloat(totalInfo.company) || 0"
                    :options="{ duration: 3, useGrouping: true }"
                    @ready="countReady1" /></span
                >家
              </p>
            </div>
          </div>
          <div class="info-item">
            <img src="../assets/images/icon2.png" />
            <div>
              <label>清运量</label>
              <p>
                <span
                  ><ICountUp
                    :delay="countDelay"
                    :endVal="parseFloat(totalInfo.count) || 0"
                    :options="{ duration: 3, useGrouping: true }"
                    @ready="countReady1" /></span
                >吨
              </p>
            </div>
          </div>
          <div class="info-item">
            <img src="../assets/images/icon3.png" />
            <div>
              <label>发电量</label>
              <p>
                <span
                  ><ICountUp
                    :delay="countDelay"
                    :endVal="parseFloat(totalInfo.scale) || 0"
                    :options="{ duration: 3, useGrouping: true }"
                    @ready="countReady1" /></span
                >万度
              </p>
            </div>
          </div>
          <div class="info-item">
            <img src="../assets/images/icon3-2.png" />
            <div>
              <label>节省支出</label>
              <p>
                <span
                  ><ICountUp
                    :delay="countDelay"
                    :endVal="parseFloat(totalInfo.money) || 0"
                    :options="{ duration: 3, useGrouping: true }"
                    @ready="countReady1" /></span
                >万元
              </p>
            </div>
          </div>
        </div>
        <div class="map-container">
          <div id="map"></div>
          <div class="map-switch">
            <el-switch
              v-model="mapHeat"
              inactive-text="预警热力图"
              @change="changeHeat"
            >
            </el-switch>
          </div>
          <ul>
            <li>
              <p class="p1"></p>
              <span>公共贮存点</span>
            </li>
            <li>
              <p class="p2"></p>
              <span>清运车</span>
            </li>
            <li>
              <p class="p3"></p>
              <span>企业</span>
            </li>
            <li>
              <p class="p4"></p>
              <span>清运路线</span>
            </li>
            <li>
              <p class="p5"></p>
              <span>分拣中心</span>
            </li>
          </ul>
        </div>
        <div class="center-title">
          <p>实时看板</p>
          <div>
            <span
              :class="{ active: boardStatus === '1' }"
              @click="boardStatus1('1')"
              >固废走向</span
            >
            <span
              :class="{ active: boardStatus === '3' }"
              @click="boardStatus1('3')"
              >预警明细</span
            >
            <span
              :class="{ active: boardStatus === '2' }"
              @click="boardStatus1('2')"
              >联动执法</span
            >
          </div>
        </div>
        <div class="board">
          <template v-if="boardStatus === '1'">
            <div class="board-header">
              <span style="width: 160px">时间</span>
              <label class="over-hide">企业名称</label>
              <span class="board-mode over-hide">处置方式</span>
              <span class="board-garbage over-hide">垃圾分类</span>
              <span class="board-remove over-hide">清运重量</span>
              <span class="board-profit over-hide">去向</span>
            </div>
            <vue-seamless-scroll
              :data="garbageList"
              :class-option="boardOption"
              class="board-wrap"
            >
              <ul @click="checkGarbageDialog">
                <li v-for="(item, index) in garbageList" :key="index">
                  <span style="width: 160px">{{ item.time }}</span>
                  <label class="over-hide">{{ item.name }}</label>
                  <span class="board-mode over-hide">{{
                    item.handleTypeName
                  }}</span>
                  <span class="board-garbage over-hide">{{
                    item.categoryTypeName
                  }}</span>
                  <span class="board-remove over-hide">{{ item.remove }}</span>
                  <span class="board-profit over-hide">{{ item.profit }}</span>
                </li>
              </ul>
            </vue-seamless-scroll>
          </template>
          <template v-if="boardStatus === '2'">
            <div class="board-header">
              <span class="boardt-mode over-hide">时间</span>
              <label class="over-hide">任务类型</label>
              <span class="boardt-mode over-hide">任务推送时间</span>
              <span class="board-mode over-hide">任务执行人</span>
              <span class="board-profit over-hide">任务耗时</span>
            </div>
            <vue-seamless-scroll
              :data="enforcementList"
              :class-option="boardOption"
              class="board-wrap"
            >
              <ul @click="checkEnforcemenDialog">
                <li v-for="(item, index) in enforcementList" :key="index">
                  <span class="boardt-mode over-hide">{{ item.applyTime}}</span>
                  <el-tooltip placement="top">
                    <div class="tooltip-info" slot="content">
                      <ul>
                        <li>
                          <label>任务类型：</label>
                          <p>{{ item.complaintTypeName }}</p>
                        </li>
                        <li>
                          <label>任务对象：</label>
                          <p>{{ item.orgName }}</p>
                        </li>
                        <li>
                          <label>投诉申报时间：</label>
                          <p>{{ item.applyTime }}</p>
                        </li>
                        <li>
                          <label>任务接取时间：</label>
                          <p>{{ item.sendTime }}</p>
                        </li>
                        <li>
                          <label>任务完成时间：</label>
                          <p>{{ item.finishTime }}</p>
                        </li>
                        <li>
                          <label>任务反馈情况：</label>
                          <p>{{ item.eventStatusName }}</p>
                        </li>
                      </ul>
                    </div>
                    <label class="over-hide">{{ item.complaintTypeName }}</label>
                  </el-tooltip>
                  <span class="boardt-mode over-hide">{{ item.sendTime }}</span>
                  <span class="board-mode over-hide">{{ item.updatedByName }}</span>
                  <span class="board-profit over-hide">{{
                    item.finishDays
                  }}</span>
                </li>
              </ul>
            </vue-seamless-scroll>
          </template>
          <template v-if="boardStatus === '3'">
            <div class="board-header">
              <p>预警时间</p>
              <span class="board-profit over-hide">预警类型</span>
              <label class="over-hide">预警对象</label>
              <p>处理时间</p>
            </div>
            <vue-seamless-scroll
              :data="detailList"
              :class-option="boardOption"
              class="board-wrap"
            >
              <ul @click="checkDetailDialog">
                <li v-for="(item, index) in detailList" :key="index">
                  <p>{{ item.time }}</p>
                  <span class="board-profit over-hide">{{ item.type }}</span>
                  <el-tooltip placement="top">
                    <div class="tooltip-info" slot="content">
                      <ul>
                        <li>
                          <label>预警时间：</label>
                          <p>{{ item.time }}</p>
                        </li>
                        <li>
                          <label>预警类型：</label>
                          <p>{{ item.type }}</p>
                        </li>
                        <li>
                          <label>预警对象：</label>
                          <p>{{ item.target }}</p>
                        </li>
                        <li>
                          <label>处置单位：</label>
                          <p>{{ item.unit }}</p>
                        </li>
                        <li>
                          <label>处置时间：</label>
                          <p>{{ item.finishTime }}</p>
                        </li>
                        <li>
                          <label>处置反馈：</label>
                          <p>{{ item.feedback }}</p>
                        </li>
                      </ul>
                    </div>
                    <label class="over-hide">{{ item.target }}</label>
                  </el-tooltip>
                  <p>{{ item.handleTime }}</p>
                </li>
              </ul>
            </vue-seamless-scroll>
          </template>
        </div>
      </div>
      <div class="right">
        <div class="title">预警处理</div>
        <div class="early-warn">
          <div class="early-warn-info">
            <div id="red-early"></div>
            <p>
              <label>红色预警：</label>
              <span>{{ redEarlyInfo.count || 0 }}<i>个</i></span>
            </p>
            <!--<p>
              <label>处理率：</label>
              <span>{{ redEarlyInfo.rate }}<i></i></span>
            </p>-->
          </div>
          <div class="early-warn-info">
            <div id="yellow-early"></div>
            <p>
              <label>黄色预警：</label>
              <span>{{ yellowEarlyInfo.count || 0 }}<i>个</i></span>
            </p>
            <!--<p>
              <label>处理率：</label>
              <span>{{ yellowEarlyInfo.rate }}<i></i></span>
            </p>-->
          </div>
        </div>
        <div class="early-title">
          <p>预警信息列表</p>
          <div>
            <span
              :class="{ active: earlyStatus === '1' }"
              @click="checkEarlyStatus('1')"
              >红色预警</span
            >
            <span
              :class="{ active: earlyStatus === '2' }"
              @click="checkEarlyStatus('2')"
              >黄色预警</span
            >
          </div>
        </div>
        <div class="early-list">
          <template v-if="earlyStatus === '1'">
            <div class="early-header">
              <i>序号</i>
              <label>预警类型</label>
              <span>预警数</span>
              <p>办结数</p>
            </div>
            <vue-seamless-scroll
              :data="redEarlyList"
              :class-option="earlyOption"
              class="early-wrap"
            >
              <ul>
                <li
                  v-for="(item, index) in redEarlyList"
                  :key="index"
                  @click="checkEarlyDialog"
                >
                  <i>{{ index + 1 }}</i>
                  <label class="over-hide">{{ item.type }}</label>
                  <span>{{ item.early }}</span>
                  <p>{{ item.rate }}</p>
                </li>
              </ul>
            </vue-seamless-scroll>
          </template>
          <template v-if="earlyStatus === '2'">
            <div class="early-header">
              <i>序号</i>
              <label>预警类型</label>
              <span>预警数</span>
              <p>办结数</p>
            </div>
            <vue-seamless-scroll
              :data="yellowEarlyList"
              :class-option="earlyOption"
              class="early-wrap"
            >
              <ul>
                <li
                  v-for="(item, index) in yellowEarlyList"
                  :key="index"
                  @click="checkEarlyDialog"
                >
                  <i>{{ index + 1 }}</i>
                  <label class="over-hide">{{ item.type }}</label>
                  <span>{{ item.early }}</span>
                  <p>{{ item.rate }}</p>
                </li>
              </ul>
            </vue-seamless-scroll>
          </template>
        </div>
        <div class="title">垃圾分类处理</div>
        <div class="rubbish">
          <div id="rubbish-chart"></div>
          <div class="rubbish-info">
            <div class="info-item">
              <img src="../assets/images/icon13.png" />
              <div>
                <label>可燃固废</label>
                <p>
                  <span
                    ><ICountUp
                      ref="combustible"
                      :delay="countDelay"
                      :endVal="parseFloat(rubbishInfo.combustible) || 0"
                      :options="{
                        duration: 3,
                        useGrouping: false,
                        decimalPlaces: 2,
                      }"
                      @ready="countReady1" /></span
                  >吨
                </p>
              </div>
            </div>
            <div class="info-item">
              <img src="../assets/images/icon14.png" />
              <div>
                <label>不可燃固废</label>
                <p>
                  <span
                    ><ICountUp
                      ref="uncombustible"
                      :delay="countDelay"
                      :endVal="parseFloat(rubbishInfo.uncombustible) || 0"
                      :options="{
                        duration: 3,
                        useGrouping: false,
                        decimalPlaces: 2,
                      }"
                      @ready="countReady1" /></span
                  >吨
                </p>
              </div>
            </div>
            <!--            <div class="info-item">-->
            <!--              <img src="../assets/images/icon15.png" />-->
            <!--              <div>-->
            <!--                <label>可利用固废</label>-->
            <!--                <p>-->
            <!--                  <span-->
            <!--                    ><ICountUp-->
            <!--                      :delay="countDelay"-->
            <!--                      :endVal="parseFloat(rubbishInfo.available) || 0"-->
            <!--                      :options="{ duration: 3, useGrouping: false }"-->
            <!--                      @ready="countReady1" /></span-->
            <!--                  >吨-->
            <!--                </p>-->
            <!--              </div>-->
            <!--            </div>-->
          </div>
        </div>
      </div>
    </div>
    <div
      class="mantle"
      v-if="
        garbageVisible ||
        enforcementVisible ||
        detailVisible ||
        companyVible ||
        earlyVisible ||
        vedioVisible ||
        garbageInfoVisible
      "
    ></div>
    <div class="company-dialog" v-if="garbageVisible">
      <div class="dialog-title">
        <p>固废走向</p>
        <span @click="garbageVisible = false"></span>
      </div>
      <div class="dialog-list dialog-list-garbage">
        <div>
          <label>时间</label>
          <p class="over-hide">企业名称</p>
          <span class="over-hide">处置方式</span>
          <span class="over-hide">垃圾分类</span>
          <span class="over-hide">清运重量</span>
          <span class="over-hide">去向</span>
        </div>
        <ul>
          <li
            v-for="(item, index) in garbageDialogList"
            @click="checkGarbageInfoDialog(item)"
            :key="index"
          >
            <label>{{ item.time }}</label>
            <p class="over-hide">{{ item.name }}</p>
            <span class="over-hide">{{ item.handleTypeName }}</span>
            <span class="over-hide">{{ item.categoryTypeName }}</span>
            <span class="over-hide">{{ item.remove }}</span>
            <span class="over-hide">{{ item.profit }}</span>
          </li>
        </ul>
      </div>
      <div class="dialog-page">
        <el-pagination
          @size-change="handleGarbageSizeChange"
          @current-change="handleGarbageCurrentChange"
          :current-page="garbagePage"
          :page-sizes="[8, 16, 32, 64]"
          :page-size="garbageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="garbageDialogListSize"
        >
        </el-pagination>
      </div>
    </div>
    <div class="company-dialog" v-if="garbageVisiblezx">
      <div class="dialog-title">
        <p>订单明细</p>
        <span @click="garbageVisiblezx = false"></span>
      </div>
      <div class="dialog-list dialog-list-garbage">
        <div>
          <label>时间</label>
          <p class="over-hide">企业名称</p>
          <span class="over-hide">处置方式</span>
          <span class="over-hide">垃圾分类</span>
          <span class="over-hide">清运重量</span>
          <span class="over-hide">去向</span>
        </div>
        <ul>
          <li
                  v-for="(item, index) in garbageDialogList"
                  @click="checkGarbageInfoDialog(item)"
                  :key="index"
          >
            <label>{{ item.time }}</label>
            <p class="over-hide">{{ item.name }}</p>
            <span class="over-hide">{{ item.handleTypeName }}</span>
            <span class="over-hide">{{ item.categoryTypeName }}</span>
            <span class="over-hide">{{ item.remove }}</span>
            <span class="over-hide">{{ item.profit }}</span>
          </li>
        </ul>
      </div>
      <div class="dialog-page">
        <el-pagination
                @size-change="handleGarbageSizeChange"
                @current-change="handleGarbageCurrentChange"
                :current-page="garbagePage"
                :page-sizes="[8, 16, 32, 64]"
                :page-size="garbageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="garbageDialogListSize"
        >
        </el-pagination>
      </div>
    </div>

    <div class="company-dialog" v-if="enforcementVisible">
      <div class="dialog-title">
        <p>联动执法</p>
        <span @click="enforcementVisible = false"></span>
      </div>

      <div class="dialog-list dialog-list-enforcement">
        <div>
          <p>任务类型</p>
          <p>任务对象</p>
          <label>任务申报时间</label>
          <label>任务推送时间</label>
          <label>任务完成时间</label>
          <p>任务反馈情况</p>
        </div>
        <ul>
          <li v-for="(item, index) in enforcementDialogList" :key="index" @click="getDetail(item)">
            <p class="over-hide">{{ item.complaintTypeName }}</p>
            <p class="over-hide">{{ item.orgName}}</p>
            <label class="over-hide">{{ item.applyTime }}</label>
            <label class="over-hide">{{ item.sendTime }}</label>
            <label class="over-hide">{{ item.finishTime }}</label>
            <p class="over-hide">{{ item.eventStatusName }}</p>
          </li>
        </ul>
      </div>
      <div class="dialog-page">
        <el-pagination
          @size-change="handleEnforcementSizeChange"
          @current-change="handleEnforcementCurrentChange"
          :current-page="enforcementPage"
          :page-sizes="[8, 16, 32, 64]"
          :page-size="enforcementSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="69"
        >
        </el-pagination>
      </div>
    </div>
    <div class="company-dialog" v-if="detailVisible">
      <div class="dialog-title">
        <p>预警明细</p>
        <span @click="detailVisible = false"></span>
      </div>
      <div class="dialog-list dialog-list-detail">
        <div>
          <label>预警时间</label>
          <span>预警类型</span>
          <p class="over-hide">预警对象</p>
          <p class="over-hide">处置单位</p>
          <label>处置时间</label>
          <p class="over-hide">处置反馈</p>
        </div>
        <ul>
          <li v-for="(item, index) in detailDialogList" :key="index">
            <label>{{ item.time }}</label>
            <span>{{ item.type }}</span>
            <p class="over-hide">{{ item.target }}</p>
            <p class="over-hide">{{ item.unit }}</p>
            <label>{{ item.finishTime }}</label>
            <p class="over-hide">{{ item.feedback }}</p>
          </li>
        </ul>
      </div>
      <div class="dialog-page">
        <el-pagination
          @size-change="handleDetailSizeChange"
          @current-change="handleDetailCurrentChange"
          :current-page="detailPage"
          :page-sizes="[8, 16, 32, 64]"
          :page-size="detailSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="detailDialogListSize"
        >
        </el-pagination>
      </div>
    </div>
    <div class="company-dialog" v-if="earlyVisible">
      <div class="dialog-title">
        <p>{{ earlyStatus === "1" ? "红色预警" : "黄色预警" }}</p>
        <span @click="earlyVisible = false"></span>
      </div>
      <div class="dialog-list dialog-list-early">
        <div>
          <i>序号</i>
          <label>预警类型</label>
          <span>预警数</span>
          <p>办结数</p>
        </div>
        <ul>
          <li v-for="(item, index) in earlyDialogList" :key="index">
            <i>{{ index + 1 }}</i>
            <label class="over-hide">{{ item.type }}</label>
            <span>{{ item.early }}</span>
            <p>{{ item.rate }}</p>
          </li>
        </ul>
      </div>
      <div class="dialog-page">
        <el-pagination
          @size-change="handleEarlySizeChange"
          @current-change="handleEarlyCurrentChange"
          :current-page="earlyDialogPage"
          :page-sizes="[8, 16, 32, 64]"
          :page-size="earlyDialogSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="earlyDialogListsize"
        >
        </el-pagination>
      </div>
    </div>
    <div class="company-dialog" v-if="companyVible">
      <div class="dialog-title">
        <p>企业列表</p>
        <span @click="companyVible = false"></span>
      </div>
      <div class="dialog-list dialog-list-com">
        <div>
          <label>序号</label>
          <span>企业名称</span>
          <p>计划产废</p>
        </div>
        <ul>
          <li
            v-for="(item, index) in companyList"
            :key="index"
            :class="{ active: index === companyIndex }"
            @mouseover="companyIndex = index"
            @mouseout="companyIndex = ''"
          >
            <label>{{ index + 1 }}</label>
            <span class="over-hide">{{ item.name }}</span>
            <p>{{ item.plan }}</p>
          </li>
        </ul>
      </div>
      <div class="dialog-page">
        <el-pagination
          @size-change="handleCompanySizeChange"
          @current-change="handleCompanyCurrentChange"
          :current-page="companyPage"
          :page-sizes="[8, 16, 32, 64]"
          :page-size="companySize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="companyListSize"
        >
        </el-pagination>
      </div>
    </div>
    <div class="company-dialog" v-if="vedioVisible">
      <div class="dialog-title">
        <p>{{ vedioTitle }}</p>
        <span
          @click="
            vedioVisible = false;
            vedioUrl = '';
          "
        ></span>
      </div>
      <div class="dialog-vedio">
        <video
          id="vedio"
          :src="vedioUrl"
          controls="controls"
          autoplay="autoplay"
          preload="none"
        ></video>
      </div>
    </div>
    <div class="garbage-info-dialog" v-if="garbageInfoVisible">
      <div class="company-dialog" v-if="imgVisible">
        <div class="dialog-title">
          <p>查看照片</p>
          <span
            @click="
              imgVisible = false;
              img = '';
            "
          ></span>
        </div>
        <div class="dialog-vedio" style="text-align: center">
          <img :src="img" style="max-width: 100%; max-height: 100%" />
        </div>
      </div>
      <div class="dialog-title">
        <p>订单详情</p>
        <span @click="garbageInfoVisible = false"></span>
      </div>
      <div class="info-content">
        <div class="info-title">产废企业信息</div>
        <ul>
          <li>
            <span>企业名称：</span>
            <p>{{ garbageInfo.orgName }}</p>
          </li>
          <li>
            <span>企业联系人：</span>
            <p>{{ garbageInfo.contact }}</p>
          </li>
          <li>
            <span>联系电话：</span>
            <p>{{ garbageInfo.cellphone }}</p>
          </li>
          <li>
            <span>详细地址：</span>
            <p class="over-hide">{{ garbageInfo.address }}</p>
          </li>
          <li>
            <span>所属街道：</span>
            <p>{{ garbageInfo.streetCodeName }}</p>
          </li>
          <li>
            <span>单位类型：</span>
            <p>{{ garbageInfo.orgTypeName }}</p>
          </li>
          <li>
            <span>信用代码：</span>
            <p>{{ garbageInfo.creditCode }}</p>
          </li>
          <li>
            <span>注册时间：</span>
            <p>{{ garbageInfo.createTime }}</p>
          </li>
        </ul>
        <div class="info-title">订单信息</div>
        <ul>
          <li>
            <span>订单编号：</span>
            <p>{{ garbageInfo.orderCode }}</p>
          </li>
          <li>
            <span>订单状态：</span>
            <p>{{ garbageInfo.orderStatusName }}</p>
          </li>
          <li>
            <span>取消原因：</span>
            <p class="over-hide">
              {{
                garbageInfo.cancelReason ? garbageInfo.cancelReason : "未取消"
              }}
            </p>
          </li>
          <li>
            <span>订单类型：</span>
            <p>预约上门</p>
          </li>
          <li>
            <span>司机姓名：</span>
            <p>{{ garbageInfo.driverName }}</p>
          </li>
          <li>
            <span>司机电话：</span>
            <p>{{ garbageInfo.driverCellphone }}</p>
          </li>
          <li>
            <span>下单时间：</span>
            <p>{{ garbageInfo.orderTime }}</p>
          </li>
          <li>
            <span>审核时间：</span>
            <p>{{ garbageInfo.authTime }}</p>
          </li>
          <li>
            <span>预约上门时间：</span>
            <p>{{ garbageInfo.smTime }}</p>
          </li>
          <li>
            <span>实际上门时间：</span>
            <p>{{ garbageInfo.sjsmTime }}</p>
          </li>
          <li>
            <span>送达时间：</span>
            <p>{{ garbageInfo.finishTime }}</p>
          </li>
        </ul>
        <div class="info-title">交易信息</div>
        <ul>
          <li>
            <span>处理方式：</span>
            <p>{{ garbageInfo.processTypeName }}</p>
          </li>
          <li>
            <span>计价方式：</span>
            <p class="over-hide">按重量计价(不足一吨按一吨算)</p>
          </li>
          <li>
            <span>固废种类：</span>
            <p>{{ garbageInfo.categoryTypeName }}</p>
          </li>
          <li>
            <span>单价：</span>
            <p>{{ garbageInfo.cleanPrice }}</p>
          </li>
          <li>
            <span>物理性状：</span>
            <p>{{ garbageInfo.physicalTypeName }}</p>
          </li>
          <li>
            <span>支付方式：</span>
            <p>预付款扣款</p>
          </li>
          <li>
            <span>重量：</span>
            <p>{{ garbageInfo.weight }}</p>
          </li>
          <li>
            <span>结算金额：</span>
            <p>{{ garbageInfo.autoCleanMoney }}</p>
          </li>
          <li>
            <span>清运车数：</span>
            <p>{{ garbageInfo.carNum }}</p>
          </li>
          <li>
            <span>企业留言：</span>
            <p>{{ garbageInfo.lxrLy }}</p>
          </li>
          <li class="photos">
            <span>企业上传照片：</span>
            <div v-if="garbageInfo.fileList && garbageInfo.fileList.length">
              <template v-for="(item, index) in garbageInfo.fileList">
                <img
                  :src="item.url"
                  :key="index"
                  alt=""
                  @click="showImg(item)"
                />
              </template>
            </div>
          </li>
        </ul>

        <div class="info-title">现场照片</div>
        <ul>
          <li>
            <span>送达地点：</span>
            <p>{{ garbageInfo.handleOrgName }}</p>
          </li>
          <li class="photos">
            <span>清运现场照片：</span>
            <div v-if="garbageInfo.smImgList && garbageInfo.smImgList.length">
              <template v-for="(item, index) in garbageInfo.smImgList">
                <img
                  :src="item.url"
                  :key="index"
                  alt=""
                  @click="showImg(item)"
                />
              </template>
            </div>
          </li>
          <li class="photos">
            <span>过磅单照片：</span>
            <div v-if="garbageInfo.hzdImgList && garbageInfo.hzdImgList.length">
              <template v-for="(item, index) in garbageInfo.hzdImgList">
                <img
                  :src="item.url"
                  :key="index"
                  alt=""
                  @click="showImg(item)"
                />
              </template>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="detail-mask" v-if="dialogVisble">
      <div class="detail-dialog">
        <div class="dialog-title">
          <p>1+x处置信息</p>
          <span @click="dialogVisble = false;"
          ></span>
        </div>
        <div class="dialog-list">
          <ep-descriptions border column="4">
            <ep-descriptions-item label="事件状态"><p>{{ eventDetail.eventStatusName }}</p></ep-descriptions-item>
            <ep-descriptions-item label="事件等级"><p>{{ eventDetail.eventGradeName }}</p></ep-descriptions-item>
            <ep-descriptions-item label="处理方式"><p>{{ eventDetail.dispositionTypeName }}</p></ep-descriptions-item>
            <ep-descriptions-item label="最终处置部门"><p>{{ eventDetail.updatedDeptName }}</p></ep-descriptions-item>
            <ep-descriptions-item label="最终处置人"><p>{{ eventDetail.updatedByName }}</p></ep-descriptions-item>
            <ep-descriptions-item label="处置完成时间" :span="2"><p>{{ eventDetail.finishTime }}</p></ep-descriptions-item>
            <ep-descriptions-item label="事件结果" :span="4"><p>{{ eventDetail.eventResult }}</p></ep-descriptions-item>
            <ep-descriptions-item label="委派部门" :span="4"><p>{{ eventDetail.createdByName }}</p></ep-descriptions-item>
          </ep-descriptions>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import autoPage from "@/utils/autoPage";
import * as echarts from "echarts";
import "echarts-liquidfill";
import ICountUp from "vue-countup-v2";
import vueSeamlessScroll from "vue-seamless-scroll";
import api from "@/services/wygf/bigScreenQuery.js";
import * as dayjs from "dayjs";

export default {
  name: "index",
  extends: autoPage,
  components: { ICountUp, vueSeamlessScroll },
  data() {
    return {
      dialogVisble:false,
      imgVisible: false,
      img: "",
      area_code:"",// 统筹区
      highqualifiedInfo: {}, // 综合评价-优质企业
      qualifiedInfo: {}, // 综合评价-合格企业
      unqualifiedInfo: {}, // 综合评价-不合格企业
      wasteInfo: {}, // 各乡镇产废情况详情
      wasteList: [], // 各乡镇产废情况列表
        clueList:[],
        rateList:[],
      totalInfo: {}, // 中间顶部数据详情
      boardStatus: "1", // 实时看板-tab状态
      boardStatus1: "1", // 实时看板-tab状态
      garbageList: [], // 实时看板-固废走向
      garbageVisible: false, // 实时看板-固废走向-弹框显示
      garbageVisiblezx: false,//乡镇订单明细
      garbageDialogList: [], // 实时看板-固废走向-弹框列表
      garbageDialogListSize: 0, //实时看板-固废走向-数据数
      garbagePage: 0, // 实时看板-固废走向-页码
      garbageSize: 8, // 实时看板-固废走向-页数
      enforcementList: [], // 实时看板-联合执法列表
      enforcementVisible: false, // 实时看板-联合执法-弹框显示
      enforcementDialogList: [], // 实时看板-联合执法-弹框列表
      enforcementPage: 1, // 实时看板-联合执法-页码
      enforcementSize: 8, // 实时看板-联合执法-页数
      detailList: [], // 实时看板-预警明细列表
      detailVisible: false, // 实时看板-预警明细-弹框显示
      detailDialogList: [], // 实时看板-预警明细-弹框列表
      detailPage: 1, // 实时看板-预警明细-页码
      detailSize: 8, // 实时看板-预警明细-页数
      redEarlyInfo: {}, // 预警处理-红色预警详情
      yellowEarlyInfo: {}, // 预警处理-黄色预警详情
      earlyStatus: "1", // 预警信息列表-tab状态
      redEarlyList: [], // 预警信息列表-红色预警
      yellowEarlyList: [], // 预警信息列表-黄色预警
      earlyVisible: false, // 预警信息列表-列表弹框
      earlyDialogList: [], // 预警信息列表-列表弹框-list数据
      earlyDialogPage: 1, // 预警信息列表-列表弹框-list数据-页码
      earlyDialogSize: 8, // 预警信息列表-列表弹框-list数据-页数
      earlyDialogListsize: 0, //预警信息列表-列表弹框-list数据
      rubbishInfo: {}, // 垃圾处理-固废详情
      companyVible: false, // 企业列表弹框
      companyList: [], // 企业列表list
      companyIndex: "", // 企业列表list-选中效果index
      companyPage: 1, // 企业列表list-页码
      companySize: 8, // 企业列表list-页数
      companyListSize: 0, //企业列表list-数
      vedioVisible: false, // 视频监控弹框
      vedioUrl: "", // 视频监控地址
      countDelay: 1000, // 数字跳动时间控制
      countArr: [], // 数字跳动数组
      countTimer: "", // 数字跳动timer
      mapHeat: true, // 预警热力图
      intervalTimer: null,
      time: "", // 时间
      week: "", // 周
      day: "", // 日期
      timer: null,
      eventDetail:{eventStatusName:"关闭",eventGradeName:"低",dispositionTypeName:"直接反馈",updatedDeptName:"桐琴中队",updatedByName:"何隽",finishTime:"2022-11-24 11:05:33",eventResult:"测试",createdByName:"部门1"},
      garbageInfoVisible: false, // 实时看板-固废走向-三级弹框显示
      garbageInfo: {}, // 实时看板-固废走向-三级弹框详情
    };
  },
  created() {
    this.getQualifiedInfos();
    this.getLllegalInfo();
    this.getWaste();
    this.getMapData();
    this.getTotal();
    this.getEarlyInfo();
    this.getEarlyList();
    this.getRubbishInfo();
    this.getEnforcementList();
    this.getEnforcementDialogList();
    this.getDate();
    let that = this;
    this.intervalTimer = setInterval(function () {
      that.getQualifiedInfos();
      that.getLllegalInfo();
      that.getWaste();
      that.getMapData();
      that.getTotal();
      that.getEarlyInfo();
      that.getEarlyList();
      that.getRubbishInfo();
      that.getEnforcementList();
      that.getEnforcementDialogList();


    }, 600000);
  },
  mounted() {
    window.checkCompanyDialog = this.checkCompanyDialog;
  },
  beforeDestroy() {
    clearTimeout(this.countTimer);
    clearTimeout(this.intervalTimer);
    clearTimeout(this.timer);
  },
  computed: {
    wasteOption() {
      return {
        step: 1,
        limitMoveNum: 5,
        hoverStop: true,
        direction: 1,
        openWatch: true,
        singleHeight: 34,
        waitTime: 5000,
        switchDelay: 400,
        input:'',
      };
    },
    boardOption() {
      return {
        step: 1,
        limitMoveNum: 5,
        hoverStop: true,
        direction: 1,
        openWatch: true,
        singleHeight: 32,
        waitTime: 5000,
        switchDelay: 400,
      };
    },
    earlyOption() {
      return {
        step: 1,
        limitMoveNum: 6,
        hoverStop: true,
        direction: 1,
        openWatch: true,
        singleHeight: 32,
        waitTime: 5000,
        switchDelay: 400,
      };
    },
  },
  filters: {
    seachButton(){

    },

    weekCN(val) {
      let weekO = {
        0: "星期日",
        1: "星期一",
        2: "星期二",
        3: "星期三",
        4: "星期四",
        5: "星期五",
        6: "星期六",
      };
      return weekO[val];
    },
  },
  methods: {
    getDetail(item){
      this.dialogVisble = true;
        let param1 = {};
        param1.bizno=item.busNo;
        this.$http
            .post(api.getComplaintsDetail, param1)
            .then((res) => {
                this.eventDetail = res.result.eventBaseCommon;
                let eventDeptCommonList=res.result.eventDeptCommonList;
                let createdByName="";
              for (let i = 0; i < eventDeptCommonList.length; i++) {
                let inde=i+1
                createdByName=createdByName+"部门"+inde+":"+eventDeptCommonList.get(i).createdByName+";"
              }
              this.eventDetail.createdByName=createdByName;
            })
            .catch((error) => {});

    },
    showImg(item) {
      this.img = item.url;
      this.imgVisible = true;
    },
    getDate() {
      this.time = dayjs().format("HH:mm:ss");
      this.week = dayjs().day();
      this.day = dayjs().format("YYYY-MM-DD");
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.getDate();
      });
    },
    getQualifiedInfos() {
      this.highqualifiedInfo = {
        count: 359,
        scale: 70,
      };
      this.qualifiedInfo = {
        count: 1796,
        scale: 20,
      };
      this.unqualifiedInfo = {
        count: 21,
        scale: 20,
      };
      /*this.$nextTick(() => {
        this.highqualifiedChartInit(parseFloat(this.highqualifiedInfo.count));
        this.qualifiedChartInit(parseFloat(this.qualifiedInfo.count));
        this.unqualifiedChartInit(parseFloat(this.unqualifiedInfo.count));
      });*/
    },
    highqualifiedChartInit(val) {
      let option = {
        series: [
          {
            type: "liquidFill", //水位图
            radius: "80%", //显示比例
            center: ["50%", "50%"], //中心点
            amplitude: 5, //水波振幅
            data: [val / 5000, val / 5000], // data个数代表波浪数
            color: [
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#01BD9B",
                },
                {
                  offset: 1,
                  color: "#04808C",
                },
              ]),
            ], //波浪颜色
            backgroundStyle: {
              borderWidth: 3, //外边框
              borderColor: "#1DA89D", //边框颜色
              color: "transparent", //边框内部填充部分颜色
            },
            label: {
              //标签设置
              normal: {
                position: ["50%", "50%"],
                formatter: `${val}家`, //显示文本,
                textStyle: {
                  fontSize: "22px", //文本字号,
                  fontWeight: "bold",
                  color: "#fff",
                },
              },
            },
            outline: {
              show: false, //最外层边框显示控制
            },
          },
        ],
      };
      let myChart = echarts.init(
        document.getElementById("highqualified-chart")
      );
      myChart.setOption(option);
    },
    qualifiedChartInit(val) {
      let option = {
        series: [
          {
            type: "liquidFill", //水位图
            radius: "80%", //显示比例
            center: ["50%", "50%"], //中心点
            amplitude: 5, //水波振幅
            data: [val / 3000, val / 3000], // data个数代表波浪数
            color: [
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#01BD9B",
                },
                {
                  offset: 1,
                  color: "#04808C",
                },
              ]),
            ], //波浪颜色
            backgroundStyle: {
              borderWidth: 3, //外边框
              borderColor: "#1DA89D", //边框颜色
              color: "transparent", //边框内部填充部分颜色
            },
            label: {
              //标签设置
              normal: {
                position: ["50%", "50%"],
                formatter: `${val}家`, //显示文本,
                textStyle: {
                  fontSize: "22px", //文本字号,
                  fontWeight: "bold",
                  color: "#fff",
                },
              },
            },
            outline: {
              show: false, //最外层边框显示控制
            },
          },
        ],
      };
      let myChart = echarts.init(document.getElementById("qualified-chart"));
      myChart.setOption(option);
    },
    unqualifiedChartInit(val) {
      let option = {
        series: [
          {
            type: "liquidFill", //水位图
            radius: "80%", //显示比例
            center: ["50%", "50%"], //中心点
            amplitude: 5, //水波振幅
            data: [val / 100, val / 100], // data个数代表波浪数
            color: [
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#01BD9B",
                },
                {
                  offset: 1,
                  color: "#04808C",
                },
              ]),
            ], //波浪颜色
            backgroundStyle: {
              borderWidth: 3, //外边框
              borderColor: "#1DA89D", //边框颜色
              color: "transparent", //边框内部填充部分颜色
            },
            label: {
              //标签设置
              normal: {
                position: ["50%", "50%"],
                formatter: `${val}%`, //显示文本,
                textStyle: {
                  fontSize: "22px", //文本字号,
                  fontWeight: "bold",
                  color: "#fff",
                },
              },
            },
            outline: {
              show: false, //最外层边框显示控制
            },
          },
        ],
      };
      let myChart = echarts.init(document.getElementById("unqualified-chart"));
      myChart.setOption(option);
    },
    // getLllegalInfo() {
    //   /*let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月"];
    //   let data1 = [36, 33, 38];
    //   let data2 = [33, 30, 31];
    //   let legendData = ["2021年", "2022年"];*/
    //   let xAxisData = [];
    //   let data1 = [];
    //   let data2 = [];
    //   let legendData = [];
    //   legendData.push("线索");
    //   legendData.push("案件");
    //   let params = {};
    //   this.$http.post(api.queryWarningComplaintsByMonthFlag,params).then(res=>{
    //     console.log(res.result)
    //     for(let index in res.result){
    //       let obj = res.result[index];
    //       xAxisData.push(obj.month);
    //       data1.push(obj.clueFlagCount);
    //       data2.push(obj.caseFlagCount);
    //     }
    //     this.$nextTick(() => {
    //       this.lllegalChartInit(xAxisData, data1, data2, legendData);
    //     });
    //   }).catch(error=>{
    //
    //   });
    // },

    getLllegalInfo(val='1') {
      let InfoList={thisYear:"2023",
        lastYear:"2022",
        thisYearDataList:[{month:1,count:0},{month:2,count:0},{month:3,count:0}],
        lastYearDataList:[{month:1,count:0},{month:2,count:0}]
      };
      let xAxisData =[];
      let data1 = [];
      let data2 = [];
      let legendData = [];
      legendData.push(InfoList.lastYear+"年");
      if(val==='1'){
        legendData.push(InfoList.thisYear+"年");
      }
      InfoList.thisYearDataList.forEach(function (element, index, array) {
          console.log("element：",element)
        console.info(element); //当前元素的值
        console.info(index);   //当前下标
        console.info(array);  //数组本身
        data2.push(element.count);
        xAxisData.push(element.month+"月")
      });
      InfoList.lastYearDataList.forEach(function (element, index, array) {
        console.info(element); //当前元素的值
        console.info(index);   //当前下标
        console.info(array);  //数组本身
        data1.push(element.count);
      });
      this.$nextTick(() => {
        this.lllegalChartInit(xAxisData, data1, data2, legendData,val==='2'?'lllegal-chart1':'lllegal-chart');
      });
    },
    lllegalChartInit(xAxisData, data1, data2, legendData,id) {
      let option = {
        grid: {
          top: "16%",
          left: "2%",
          right: 0,
          bottom: 0,
          containLabel: true,
        },
        legend: {
          data: legendData,
          right: 0,
          top: 0,
          textStyle: {
            color: "#CFE9FF",
            fontSize: 16,
          },
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          itemGap: 12, // 设置间距
        },
        xAxis: [
          {
            data: xAxisData,
            axisLabel: {
              margin: 10,
              color: "#94A6A5",
              textStyle: {
                fontSize: 14,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#475054",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              color: "#94A6A5",
              textStyle: {
                fontSize: 14,
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#475054",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "#475054",
              },
            },
          },
        ],
        series: [
          {
            name: legendData[0],
            type: "bar",
            data: data1,
            barWidth: "9px",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0.22,
                      color: "#54FFFF", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(84, 255, 255, 0)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                barBorderRadius: [30, 30, 0, 0],
              },
            }
          }
        ],
      };
      if(legendData.length>1){
        option.series.push({
          name: legendData[1],
          type: "bar",
          data: data2,
          barWidth: "9px",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0.22,
                          color: "#2A76F2", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "rgba(42, 118, 242, 0)", // 100% 处的颜色
                        },
                      ],
                      false
              ),
              barBorderRadius: [30, 30, 0, 0],
            },
          },
        },)
      }
      let myChart = echarts.init(document.getElementById(id));
      myChart.clear();
      myChart.setOption(option);
    },
    getWaste() {
      let param = [];
      this.$http
        .post(api.getWasteList, param)
        .then((res) => {
          this.wasteList = res.result.list;
        })
        .catch((error) => {});
      this.wasteInfo = {
        driver: "0",
        order: "0",
        count: "0",
      };
      this.$http
        .post(api.getWasteInfo, param)
        .then((res) => {
          this.wasteInfo.driver = res.result.driver;
          this.wasteInfo.order = res.result.order;
          this.wasteInfo.count = res.result.count;
        })
        .catch((error) => {});
    },
    getMapData() {
      let mapData = [
        {
          id: "330723207",
          name: "开发区",
          value: 4, // 预警企业百分比
          storageList: [
            // name是贮存点名称， code为贮存点编码，order为地图上贮存点图标位置，务必严格按照1,2,3,4...这样排序。
          ],
          companyCount: 1042,
          lineCount: 1,
          waste: "200",
          transfer: "50",
          driverList: [],
        },
        {
          id: "330723001",
          name: "白洋街道",
          value: 4, // 预警企业百分比
          storageList: [
            // name是贮存点名称， code为贮存点编码，order为地图上贮存点图标位置，务必严格按照1,2,3,4...这样排序。
          ],
          companyCount: 1069,
          lineCount: 1,
          waste: "200",
          transfer: "50",
          driverList: [],
        },
        {
          id: "330723002",
          name: "壶山街道",
          value: 8,
          storageList: [],
          companyCount: 128,
          lineCount: 1,
          waste: "200",
          transfer: "50",
        },
        {
          id: "330723003",
          name: "熟溪街道",
          value: 11,
          storageList: [],
          companyCount: 59,
          lineCount: 0,
          waste: "200",
          transfer: "50",
        },
        {
          id: "330723100",
          name: "柳城畲族镇",
          value: 24,
          storageList: [],
          companyCount: 29,
          lineCount: 0,
          waste: "200",
          transfer: "50",
        },
        {
          id: "330723101",
          name: "履坦镇",
          value: 4,
          storageList: [],
          companyCount: 131,
          lineCount: 0,
          waste: "200",
          transfer: "50",
        },
        {
          id: "330723102",
          name: "桐琴镇",
          value: 4,
          storageList: [],
          companyCount: 352,
          lineCount: 0,
          waste: "200",
          transfer: "50",
        },
        {
          id: "330723103",
          name: "泉溪镇",
          value: 14,
          storageList: [],
          companyCount: 316,
          lineCount: 0,
          waste: "200",
          transfer: "50",
        },
        {
          id: "330723104",
          name: "新宅镇",
          value: 24,
          storageList: [],
          companyCount: 10,
          lineCount: 0,
          waste: "200",
          transfer: "50",
        },
        {
          id: "330723105",
          name: "王宅镇",
          value: 9,
          storageList: [],
          companyCount: 81,
          lineCount: 0,
          waste: "200",
          transfer: "50",
        },
        {
          id: "330723106",
          name: "桃溪镇",
          value: 4,
          storageList: [],
          companyCount: 13,
          lineCount: 0,
          waste: "200",
          transfer: "50",
        },
        {
          id: "330723107",
          name: "茭道镇",
          value: 4,
          storageList: [],
          companyCount: 190,
          lineCount: 0,
          waste: "200",
          transfer: "50",
        },
        {
          id: "330723200",
          name: "大田乡",
          value: 4,
          storageList: [],
          companyCount: 0,
          lineCount: 0,
          waste: "200",
          transfer: "50",
        },
        {
          id: "330723201",
          name: "白姆乡",
          value: 4,
          storageList: [],
          companyCount: 6,
          lineCount: 1,
          waste: "200",
          transfer: "50",
          driverList: [],
        },
        {
          id: "330723202",
          name: "俞源乡",
          value: 4,
          storageList: [],
          companyCount: 19,
          lineCount: 0,
          waste: "200",
          transfer: "50",
        },
        {
          id: "330723203",
          name: "坦洪乡",
          value: 4,
          storageList: [],
          companyCount: 0,
          lineCount: 1,
          waste: "200",
          transfer: "50",
          driverList: [],
        },
        {
          id: "330723204",
          name: "西联乡",
          value: 4,
          storageList: [],
          companyCount: 2,
          lineCount: 0,
          waste: "200",
          transfer: "50",
        },
        {
          id: "330723205",
          name: "三港乡",
          value: 4,
          storageList: [],
          companyCount: 0,
          lineCount: 0,
          waste: "200",
          transfer: "50",
        },
        {
          id: "330723206",
          name: "大溪口乡",
          value: 4,
          storageList: [],
          companyCount: 1,
          lineCount: 0,
          waste: "200",
          transfer: "50",
        },
      ];
      let storageData = [];
      let param = [];
      this.$http
        .post(api.getMapData, param)
        .then((res) => {
          let data = res.result;
          //数据
          mapData.forEach((el) => {
            if (data[el.id]) {
              el.lineCount = data[el.id].lineCount;
              el.storageList = data[el.id].storageList;
              el.companyCount = data[el.id].companyCount;
              el.transfer = data[el.id].transfer;
              el.waste = data[el.id].waste;
              el.storageList = data[el.id].storageList;
              if (data[el.id].driverList && data[el.id].driverList.length) {
                el.driverList = [];
                data[el.id].driverList.forEach((a) => {
                  el.driverList.push({
                    name: a.driverName,
                    post: a.orgName,
                  });
                });
              } else {
                el.driverList = [];
              }
            } else {
              el.lineCount = 0;
              el.driverList = [];
              el.companyCount = 0;
              el.waste = 0;
              el.value = 4;
            }
            if (el.storageList.length) {
              el.storageList.forEach((t) => {
                storageData.push({
                  id: el.id,
                  ...t,
                });
              });
            }
          });
          let companyData = mapData.filter((el) => {
            return el.companyCount > 0;
          });
          let lineData = mapData.filter((el) => {
            return el.lineCount > 0;
          });

          this.mapChartInit(mapData, storageData, companyData, lineData);
        })
        .catch((error) => {});
    },
    mapChartInit(mData, sData, cData, lData) {
      let outInPercentstr = [
        { label: "<5%", color: "rgba(14, 155, 198, 0.3)", lte: 5 },
        { label: "5%-10%", color: "rgb(244, 156, 0, 0.3)", gt: 5, lte: 10 },
        { label: "10-20%", color: "rgb(255, 255, 0, 0.3)", gt: 10, lte: 20 },
        { label: ">20%", color: "rgb(249, 68, 29, 0.3)", gt: 20 },
      ];
      let option = {
        tooltip: {
          show: true,
          enterable: true,
          className: "map-tootip",
          position: (p) => {
            //其中p为当前鼠标的位置
            return [p[0] + 10, p[1] + 10];
          },
          formatter: (params) => {
            if (params.seriesName === "storage") {
              let name = params.data.data.name;
              return `<p class="map-storage">${name}</p>`;
            } else if (params.seriesName === "line") {
              let list = params.data.data.driverList || [];
              let dom = `<div class="map-line"><div>司机</div><ul>`;
              for (let i = 0; i < list.length; i++) {
                dom += `<li><span>${list[i].name}</span><label>${list[i].post}</label></li>`;
              }
              dom += `</ul></div>`;
              return dom;
            } else if (params.seriesName === "map") {
              let info = params.data.data || {};
              return `<div class="map-map" onclick="checkCompanyDialog(${
                info.id
              })"><div>${info.name}</div><p><label>企业</label><span>${
                info.companyCount || 0
              }</span><i>家</i></p><p><label>年度计划产废</label><span>${
                info.waste || 0
              }</span><i>吨</i></p><p><label>申报转移量</label><span>${
                info.transfer || 0
              }</span><i>吨</i></p></div>`;
            } else {
              return "";
            }
          },
          alwaysShowContent: true,
        },
        geo: [
          {
            map: "330723_full",
            zoom: 1.22,
            itemStyle: {
              borderColor: "#6BE0E4",
              borderWidth: 2,
              areaColor: "rgba(14, 155, 198, 0.3)",
              shadowColor: "rgba(14, 155, 198, 0.3)",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            emphasis: {
              itemStyle: {
                areaColor: "rgba(35, 175, 121, 0.5)",
                shadowBlur: 2,
                shadowColor: "rgba(35, 175, 121, 0.5)",
                shadowOffsetX: -2,
                shadowOffsetY: -2,
              },
              label: {
                show: false,
              },
            },
            select: {
              itemStyle: {
                areaColor: "rgba(35, 175, 121, 0.5)",
                shadowBlur: 2,
                shadowColor: "rgba(35, 175, 121, 0.5)",
                shadowOffsetX: -2,
                shadowOffsetY: -2,
              },
              label: {
                show: false,
              },
            },
            z: 3,
          },
          {
            map: "330723",
            zoom: 1.22,
            itemStyle: {
              areaColor: "transparent",
              borderColor: "#46F6E4",
              borderWidth: 5,
              shadowColor: "#1DA89D",
              shadowOffsetY: 5,
              shadowOffsetX: 5,
              shadowBlur: 5,
            },
            z: 1,
            silent: true,
            selectedMode: "false", //是否允许选中多个区域
          },
        ],
        series: [
          {
            name: "name",
            type: "scatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            symbolSize: 0,
            hoverAnimation: false,

            label: {
              formatter: "{b}",
              position: "right",
              color: "#FAFEFF",
              show: true,
              fontSize: 16,
            },
            itemStyle: {
              color: "#79FFF2",
              borderWidth: 0,
              emphasis: {
                areaColor: "transparent",
                label: {
                  show: false,
                },
              },
            },
            z: 5,
            data: [],
          },

          {
            name: "company",
            type: "scatter",
            coordinateSystem: "geo",
            geoIndex: 1,
            symbol:
              "image://",
            symbolSize: 16,
            label: {
              show: false,
            },
            itemStyle: {
              show: false,
            },
            z: 5,
            data: [],
          },
          {
            name: "line",
            type: "lines",
            coordinateSystem: "geo",
            zlevel: 2,
            large: true,
            zlevel: 2,
            effect: {
              show: true,
              period: 25, //箭头指向速度，值越小速度越快
              trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol:
                "image://", //箭头图标
              symbolSize: 35, //图标大小
            },
            lineStyle: {
              normal: {
                color: "#F5B600",
                width: 2,
                opacity: 1,
                curveness: 0.3,
              },
            },
            label: {
              normal: {
                show: false,
              },
            },
            data: [],
          },
          {
            type: "scatter",
            coordinateSystem: "geo",
            geoIndex: 1,
            symbol: "circle",
            symbolSize: 12,
            label: {
              show: false,
            },
            itemStyle: {
              normal: {
                show: false,
                color: "#FFC81A",
                shadowColor: "rgba(238, 218, 47, 0.3)",
                shadowBlur: 15,
              },
            },
            z: 5,
            data: [],
          },
          {
            name: "map",
            type: "map",
            map: "330723_full",
            geoIndex: 0,
            data: [],
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            legendHoverLink: true,
            symbolSize: 20,
            label: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: "#39DC22", //标志颜色
                shadowBlur: 2,
                shadowColor: "#39DC22",
              },
            },
            data: [
              { name: "分拣中心", value: [119.775225302, 28.9236915065, 729] },
            ],
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            zlevel: 1,
          },
          {
            name: "storage",
            type: "scatter",
            coordinateSystem: "geo",
            geoIndex: 1,
            symbol:
              "image://",
            symbolSize: 16,
            label: {
              show: false,
            },
            itemStyle: {
              show: false,
            },
            z: 5,
            data: [],
          },
        ],
      };
      echarts.registerMap(
        "330723",
        require("../../static/geojson/330723.json")
      );
      let mapJosn = require("../../static/geojson/330723_full.json");
      echarts.registerMap("330723_full", mapJosn);
      let nameData = mapJosn.features.map(function (t) {
        let n = t.properties;
        let center = n.center || n.cp;
        return {
          id: n.adcode || t.id || n.name,
          name: n.name,
          value: center.concat(0),
          point: "name",
        };
      });
      let storageData = this.convertMapData2(mapJosn, sData);
      let companyData = this.convertMapData2(mapJosn, cData);
      let lineData = this.convertMapData2(mapJosn, lData);
      let mapData = this.convertMapData2(mapJosn, mData);
      option.series[0].data = nameData;

      option.series[1].data = companyData.map((item) => {
        let zbarr = [item.center[0] + 0.04, item.center[1] - 0.02];
        return {
          name: item.name,
          value: zbarr.concat(0),
          data: item.data,
          point: "company",
        };
      });
      option.series[2].data = lineData.map((item) => {
        let zbarr = [item.center[0] + 0.04, item.center[1] + 0.015];
        return {
          fromName: item.name,
          toName: "履坦镇",
          coords: [zbarr, [119.775225302, 28.9236915065]],
          point: "line",
          data: item.data,
        };
      });
      option.series[3].data = lineData.map((item) => {
        let zbarr = [item.center[0] + 0.04, item.center[1] + 0.015];
        return {
          name: item.name,
          value: zbarr,
        };
      });
      option.series[4].data = mapData.map((item) => {
        return {
          name: item.name,
          point: "map",
          data: item.data,
          value: item.data.value,
        };
      });
      option.series[6].data = storageData.map((item) => {
        let multiple = item.data.order || 1;
        let zbarr = [item.center[0] + 0.04 * multiple, item.center[1] + 0.02];
        return {
          name: item.name,
          value: zbarr.concat(0),
          data: item.data,
          point: "storage",
        };
      });
      if (!this.mapHeat) {
        option.series.splice(2, 1);
        option.series.splice(2, 1);
        option.series.splice(3, 1);
        option.visualMap = {
          type: "piecewise",
          splitNumber: 5,
          calculable: true,
          itemWidth: 20,
          itemHeight: 16,
          itemGap: 5,
          align: "left",
          pieces: outInPercentstr,
          right: 20,
          bottom: 50,
          textStyle: {
            color: "#edf4fe",
            fontSize: 16,
          },
        };
      }
      let mapDom = document.getElementById("map");
      echarts.dispose(mapDom);
      let myChart = echarts.init(mapDom);
      myChart.setOption(option);
      myChart.on("click", (params) => {
        if (params.seriesName === "company") {
          this.checkCompanyDialog(params.data.data.id);
        }
        if (params.seriesName === "storage") {
          this.checkVedioDialog(params.data.data.name, params.data.data.code);
        }
      });
    },
    convertMapData2(geoData, data) {
      var mapArray = geoData.features;
      var city = {},
        res = [];
      try {
        mapArray.forEach(function (t) {
          var n = t.properties;
          var cid = n.adcode || t.id || n.name;
          var center = n.center || n.cp;
          city[cid] = {
            id: cid,
            name: n.name,
            center: center,
          };
        });
      } catch (e) {
        return [];
      }
      data.map(function (item) {
        if (!item.id || item.id === "") return;
        if (!city[item.id]) return;
        res.push({
          id: item.id,
          name: city[item.id].name,
          center: city[item.id].center,
          data: item,
        });
      });
      return res;
    },
    // 预警热力图开关
    changeHeat() {
      this.getMapData();
    },
    checkCompanyDialog(id) {
      this.companyList = [
        { name: "武义好学童家居有限公司", plan: 85 },
        { name: "武义倍久不锈钢制品有限公司", plan: 150 },
        { name: "武义艾涂仕塑粉有限公司", plan: 55 },
        { name: "武义松金链条配件有限公司", plan: 60 },
        { name: "武义浩然木制品厂", plan: 75 },
        { name: "武义县湛蓝包装材料厂", plan: 88 },
        { name: "武义县广阳文具厂", plan: 90 },
        { name: "武义县白洋群力塑料制品厂", plan: 44 },
      ];
      // let param={
      //     id:id,
      // }
      // this.$http.post(api.getCompanyList,param).then(res=>{
      //     this.companyList =res.result.list;
      //     this.companyPage=res.result.pageNum;
      //     this.companySize=res.result.pageSize;
      //     this.companyListSize=res.result.total;
      // }).catch(error=>{
      //
      // });
      this.companyVible = true;
    },
    checkVedioDialog(name, code) {
      this.vedioTitle = `${name}`;
      this.vedioUrl =
        "https://akrs.epsoft.com.cn/isp/staticfiles/video/xuanc.ansf11.mp4";
      this.vedioVisible = true;
    },
    getTotal() {
      let param = {};
      this.$http
        .post(api.getTotalInfo, param)
        .then((res_qy) => {
          this.$http
                  .post(api.getTotalInfo1, param)
                  .then((res) => {
                    this.qualifiedInfo.count = Number(res.result.cfqyzl);

                    // this.unqualifiedInfo.scale = this.unqualifiedInfo.count;
                    console.log(this.qualifiedInfo.count);
                    console.log(this.totalInfo.company);
                    console.log(this.unqualifiedInfo.count);
                    this.totalInfo.company = Number(res_qy.result.company);
                    this.highqualifiedInfo.count = Number(res_qy.result.company);
                    this.highqualifiedInfo.scale = Number(res_qy.result.company);
                    this.totalInfo.count = Number(res_qy.result.count);
                    this.totalInfo.scale = Number(res_qy.result.scale);
                    this.totalInfo.money = Number(res_qy.result.money);
                    this.unqualifiedInfo.count = (this.qualifiedInfo.count/this.highqualifiedInfo.count*100).toFixed(1);
                    this.highqualifiedChartInit(parseFloat(this.highqualifiedInfo.count));
                    this.qualifiedChartInit(parseFloat(this.qualifiedInfo.count));
                    this.unqualifiedChartInit(parseFloat(this.unqualifiedInfo.count));
                  })
                  .catch((error) => {});
        })
        .catch((error) => {});




      let param1 = {};
      param1.pageNum = this.garbagePage;
      param1.pageSize = this.garbageSize;
      param1.area = this.area_code;
      console.log("this.area_code:",this.area_code)
      this.$http
        .post(api.getGarbageList, param1)
        .then((res) => {
          this.garbageList = res.result.list;
          this.garbageDialogList = res.result.list;
          this.garbageDialogListSize = res.result.total;
        })
        .catch((error) => {});
      let param2 = {};
      param2.pageNum = this.detailPage;
      param2.pageSize = this.detailSize;
      this.$http
        .post(api.getDetailList, param2)
        .then((res) => {
           this.detailList = res.result.list;
          this.detailDialogList = res.result.list;
          this.detailDialogListSize = res.result.total;
        })
        .catch((error) => {});
     /* this.detailList = [
        {
          id: "1",
          time: "2022.3.21 10:14:23",
          type: "红色预警",
          target: "武义县新瑞服装厂",
          handleTime: "5天",
          unit: "武义县执法局",
          finishTime: "2022.3.21 10:14:23",
          feedback: "已处理",
        },
        {
          id: "2",
          time: "2022.3.21 10:14:23",
          type: "红色预警",
          target: "浙江武义同花顺扑克有限公司",
          handleTime: "5天",
          unit: "武义县执法局",
          finishTime: "",
          feedback: "",
        },
        {
          id: "3",
          time: "2022.3.21 10:14:23",
          type: "红色预警",
          target: "武义晓陆五金制品厂",
          handleTime: "5天",
          unit: "武义县执法局",
          finishTime: "2022.3.21 10:14:23",
          feedback: "已处理",
        },
        {
          id: "4",
          time: "2022.3.21 10:14:23",
          type: "红色预警",
          target: "武义宇鑫纸箱厂",
          handleTime: "5天",
          unit: "武义县执法局",
          finishTime: "2022.3.21 10:14:23",
          feedback: "已处理",
        },
        {
          id: "5",
          time: "2022.3.21 10:14:23",
          type: "红色预警",
          target: "武义固伟纸箱厂",
          handleTime: "5天",
          unit: "武义县执法局",
          finishTime: "",
          feedback: "处理中",
        },
        {
          id: "6",
          time: "2022.3.21 10:14:23",
          type: "红色预警",
          target: "武义县铭翔门窗厂",
          handleTime: "5天",
          unit: "武义县执法局",
          finishTime: "2022.3.21 10:14:23",
          feedback: "已处理",
        },
        {
          id: "7",
          time: "2022.3.21 10:14:23",
          type: "红色预警",
          target: "武义零智不锈钢制品有限公司",
          handleTime: "5天",
          unit: "武义县执法局",
          finishTime: "2022.3.21 10:14:23",
          feedback: "已处理",
        },
        {
          id: "8",
          time: "2022.3.21 10:14:23",
          type: "红色预警",
          target: "浙江大跑科技有限公司",
          handleTime: "5天",
          unit: "武义县执法局",
          finishTime: "2022.3.21 10:14:23",
          feedback: "已处理",
        },
      ];*/
      // this.enforcementList = [
      //   {
      //     id: "1",
      //     time: "2022.3.21 10:14:23",
      //     target: "查处环城东路垃圾乱倒问题",
      //     username: "李小华",
      //     takeTime: "5天",
      //     targetDetail: "环城东路存在垃圾乱倒问题",
      //     publishTime: "2022.3.20 10:14:23",
      //     pickTime: "2022.3.20 10:14:23",
      //     completeTime: "2022.3.20 10:14:23",
      //     feedback: "问题已解决",
      //   },
      //   {
      //     id: "2",
      //     time: "2022.3.21 10:14:23",
      //     target: "查处牡丹路垃圾乱倒问题",
      //     username: "谢洋洋",
      //     takeTime: "5天",
      //     targetDetail: "牡丹路存在垃圾乱倒问题",
      //     publishTime: "2022.3.20 10:14:23",
      //     pickTime: "2022.3.20 10:14:23",
      //     completeTime: "2022.3.20 10:14:23",
      //     feedback: "问题已解决",
      //   },
      //   {
      //     id: "3",
      //     time: "2022.3.19 10:14:23",
      //     target: "查处武义县广阳文具厂垃圾乱倒问题",
      //     username: "李小华",
      //     takeTime: "5天",
      //     targetDetail: "武义县广阳文具厂存在垃圾乱倒问题",
      //     publishTime: "2022.3.18 10:14:23",
      //     pickTime: "2022.3.18 10:14:23",
      //     completeTime: "2022.3.18 10:14:23",
      //     feedback: "问题已解决",
      //   },
      //   {
      //     id: "4",
      //     time: "2022.3.18 10:14:23",
      //     target: "查处武义齐创塑业有限公司垃圾乱倒问题",
      //     username: "谢洋洋",
      //     takeTime: "5天",
      //     targetDetail: "武义齐创塑业有限公司存在垃圾乱倒问题",
      //     publishTime: "2022.3.17 10:14:23",
      //     pickTime: "2022.3.17 10:14:23",
      //     completeTime: "2022.3.17 10:14:23",
      //     feedback: "问题已解决",
      //   },
      //   {
      //     id: "5",
      //     time: "2022.3.17 10:14:23",
      //     target: "查处武义县白洋街道腾博车床加工厂垃圾乱倒问题",
      //     username: "李小华",
      //     takeTime: "5天",
      //     targetDetail: "武义县白洋街道腾博车床加工厂存在垃圾乱倒问题",
      //     publishTime: "2022.3.16 10:14:23",
      //     pickTime: "2022.3.16 10:14:23",
      //     completeTime: "2022.3.16 10:14:23",
      //     feedback: "问题已解决",
      //   },
      //   {
      //     id: "6",
      //     time: "2022.3.16 10:14:23",
      //     target: "查处浙江武义同花顺扑克有限公司垃圾乱倒问题",
      //     username: "李小华",
      //     takeTime: "5天",
      //     targetDetail: "浙江武义同花顺扑克有限公司存在垃圾乱倒问题",
      //     publishTime: "2022.3.15 10:14:23",
      //     pickTime: "2022.3.15 10:14:23",
      //     completeTime: "2022.3.15 10:14:23",
      //     feedback: "问题已解决",
      //   },
      // ];
      // this.enforcementDialogList = [
      //   {
      //     id: "1",
      //     time: "2022.3.21 10:14:23",
      //     target: "查处环城东路垃圾乱倒问题",
      //     username: "李小华",
      //     takeTime: "5天",
      //     targetDetail: "环城东路存在垃圾乱倒问题",
      //     publishTime: "2022.3.20 10:14:23",
      //     pickTime: "2022.3.20 10:14:23",
      //     completeTime: "2022.3.20 10:14:23",
      //     feedback: "问题已解决",
      //   },
      //   {
      //     id: "2",
      //     time: "2022.3.21 10:14:23",
      //     target: "查处牡丹路垃圾乱倒问题",
      //     username: "谢洋洋",
      //     takeTime: "5天",
      //     targetDetail: "牡丹路存在垃圾乱倒问题",
      //     publishTime: "2022.3.20 10:14:23",
      //     pickTime: "2022.3.20 10:14:23",
      //     completeTime: "2022.3.20 10:14:23",
      //     feedback: "问题已解决",
      //   },
      //   {
      //     id: "3",
      //     time: "2022.3.19 10:14:23",
      //     target: "查处武义县广阳文具厂垃圾乱倒问题",
      //     username: "李小华",
      //     takeTime: "5天",
      //     targetDetail: "武义县广阳文具厂存在垃圾乱倒问题",
      //     publishTime: "2022.3.18 10:14:23",
      //     pickTime: "2022.3.18 10:14:23",
      //     completeTime: "2022.3.18 10:14:23",
      //     feedback: "问题已解决",
      //   },
      //   {
      //     id: "4",
      //     time: "2022.3.18 10:14:23",
      //     target: "查处武义齐创塑业有限公司垃圾乱倒问题",
      //     username: "谢洋洋",
      //     takeTime: "5天",
      //     targetDetail: "武义齐创塑业有限公司存在垃圾乱倒问题",
      //     publishTime: "2022.3.17 10:14:23",
      //     pickTime: "2022.3.17 10:14:23",
      //     completeTime: "2022.3.17 10:14:23",
      //     feedback: "问题已解决",
      //   },
      //   {
      //     id: "5",
      //     time: "2022.3.17 10:14:23",
      //     target: "查处武义县白洋街道腾博车床加工厂垃圾乱倒问题",
      //     username: "李小华",
      //     takeTime: "5天",
      //     targetDetail: "武义县白洋街道腾博车床加工厂存在垃圾乱倒问题",
      //     publishTime: "2022.3.16 10:14:23",
      //     pickTime: "2022.3.16 10:14:23",
      //     completeTime: "2022.3.16 10:14:23",
      //     feedback: "问题已解决",
      //   },
      //   {
      //     id: "6",
      //     time: "2022.3.16 10:14:23",
      //     target: "查处浙江武义同花顺扑克有限公司垃圾乱倒问题",
      //     username: "李小华",
      //     takeTime: "5天",
      //     targetDetail: "浙江武义同花顺扑克有限公司存在垃圾乱倒问题",
      //     publishTime: "2022.3.15 10:14:23",
      //     pickTime: "2022.3.15 10:14:23",
      //     completeTime: "2022.3.15 10:14:23",
      //     feedback: "问题已解决",
      //   },
      //   {
      //     id: "6",
      //     time: "2022.3.16 10:14:23",
      //     target: "查处浙江武义同花顺扑克有限公司垃圾乱倒问题",
      //     username: "李小华",
      //     takeTime: "5天",
      //     targetDetail: "浙江武义同花顺扑克有限公司存在垃圾乱倒问题",
      //     publishTime: "2022.3.15 10:14:23",
      //     pickTime: "2022.3.15 10:14:23",
      //     completeTime: "2022.3.15 10:14:23",
      //     feedback: "问题已解决",
      //   },
      //   {
      //     id: "6",
      //     time: "2022.3.16 10:14:23",
      //     target: "查处浙江武义同花顺扑克有限公司垃圾乱倒问题",
      //     username: "李小华",
      //     takeTime: "5天",
      //     targetDetail: "浙江武义同花顺扑克有限公司存在垃圾乱倒问题",
      //     publishTime: "2022.3.15 10:14:23",
      //     pickTime: "2022.3.15 10:14:23",
      //     completeTime: "2022.3.15 10:14:23",
      //     feedback: "问题已解决",
      //   },
      // ];
    },
    checkGarbageDialog() {
      this.garbageVisible = true;

    },
    checkGarbageDialogxz(item) {
      if(item.area){
        this.area_code = item.area
      }
      this.garbageVisiblezx = true;
      this.getTotal()
    },
    checkEnforcemenDialog() {
      this.enforcementVisible = true;
    },
    checkDetailDialog() {
      // 可通过id去获取当前列具体信息
      this.detailVisible = true;
    },
    // 固废走向-三级弹框-详情
    checkGarbageInfoDialog(item) {
      // item.name 或者其他字段可以确定当前点击订单,然后通过接口获取到详细信息
      // this.garbageVisible = false; //关闭固废走向二级弹框-列表弹框
      this.garbageInfoVisible = true;
      this.garbageInfo = {
        // 企业信息
        company: "浙江安普事业有限公司",
        name: "王剑斌",
        mobile: "13735742998",
        address: "百荷路9号",
        town: "开发区",
        type: "公司",
        creditCode: "913307007639008752",
        register: "2021-09-23 10:45:55",
        // 订单信息
        orderCode: "2022071500010",
        orderStatus: "已送达",
        reason: "",
        orderType: "预约上门",
        driver: "巫金武",
        driverTel: "13735742997",
        orderTime: "2022-07-15 20:13:44",
        examineTime: "2022-07-16 12:19:44",
        appointTime: "2022-07-18 10:16:44",
        actualTime: "2022-07-18 10:09:44",
        serviceTime: "2022-07-18 11:09:44",
        // 交易信息
        treatment: "可燃物",
        valuation: "按重量计价(不足一顿按一顿算)",
        solid: "废塑料",
        price: "308",
        character: "固态(固体废物)",
        payment: "预付款扣款",
        weight: "4.28",
        amount: "1318.24",
        clean: "1",
        message: "需大车",
        enterprisePhotos: [
          { src: require("../assets/images/icon32.png") },
          { src: require("../assets/images/icon33.png") },
        ],
        // 现场照片
        place: "伟明焚烧发电厂",
        sitePhotos: [
          { src: require("../assets/images/icon35.png") },
          { src: require("../assets/images/icon36.png") },
        ],
        weighPhotos: [{ src: require("../assets/images/icon34.png") }],
      };
      let params = {
        orderId: item.orderId,
      };
      this.$http
        .post(api.queryOrderOne, params)
        .then((res) => {
          this.garbageInfo = res.result;
          this.garbageInfo.hzdImgList = this.makeImgList(res.result.hzdImgs);
          this.garbageInfo.smImgList = this.makeImgList(res.result.smImgs);
          console.log(this.garbageInfo);
        })
        .catch((e) => {});
    },
    makeImgList(showId) {
      console.log("111");
      console.log(showId);
      if (!showId) {
        return;
      }
      let fileShowUrl = api.fileShowUrl;
      let showIds = showId.split(",");
      let num = 1;
      if (showIds && showIds.length > 0) {
        let imgUrlList = [];
        showIds.forEach((item) => {
          let param = {};
          param.showId = item;
          param.url = fileShowUrl + item;
          let uuid = num;
          num = num + 1;
          param.name = uuid + ".jpg";
          param.uid = uuid;
          param.status = "done";
          imgUrlList.push(param);
        });
        return imgUrlList;
      }
    },
    getEarlyInfo() {
      // this.redEarlyInfo = {
      //   count: 70,
      //   rate: "86%",
      // };
      // this.yellowEarlyInfo = {
      //   count: 657,
      //   rate: "96%",
      // };
      // this.$nextTick(() => {
      //   this.redEarlyChartInit(parseFloat(this.redEarlyInfo.rate));
      //   this.yellowEarlyChartInit(parseFloat(this.yellowEarlyInfo.rate));
      // });
      let param=[];
      this.$http.post(api.getEarlyInfo,param).then(res=>{
          this.redEarlyInfo.count = res.result.redConut;
          this.redEarlyInfo.rate = res.result.redRate;
          this.yellowEarlyInfo.count = res.result.yellowConut;
          this.yellowEarlyInfo.rate = res.result.yellowRate;
        this.$nextTick(() => {
          this.redEarlyChartInit(parseFloat(this.redEarlyInfo.count)/100);
          this.yellowEarlyChartInit(parseFloat(this.yellowEarlyInfo.count)/100);
        });
      }).catch(error=>{

      });
    },
    redEarlyChartInit(val) {
      let option = {
        series: [
          {
            name: "预警处理",
            type: "gauge",
            center: ["50%", "80%"],
            radius: "155%",
            min: 0, //最小刻度
            max: 100, //最大刻度
            splitNumber: 10, //刻度数量
            startAngle: 180,
            endAngle: 0,
            axisLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: [[1, "#F44D2A"]],
              },
            }, //仪表盘轴线
            axisLabel: {
              show: false,
            }, //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 5,
              lineStyle: {
                color: "#F44D2A",
                width: 1,
              },
              length: -3,
            }, //刻度样式
            splitLine: {
              show: true,
              length: -10,
              lineStyle: {
                color: "#F44D2A",
                width: 1,
              },
            }, //分隔线样式
          },
          {
            type: "gauge",
            radius: "115%",
            center: ["50%", "80%"],
            splitNumber: 0, //刻度数量
            startAngle: 180,
            endAngle: 0,
            axisLine: {
              show: true,
              lineStyle: {
                width: 15,
                color: [
                  [
                    10,
                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "#F46C22",
                      },
                      {
                        offset: 1,
                        color: "#FF3317",
                      },
                    ]),
                  ],
                ],
              },
            },
            //分隔线样式。
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: true,
              length: "70%",
              width: "8%",
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "#F46C22",
                  },
                  {
                    offset: 1,
                    color: "#FF3317",
                  },
                ]),
              },
            },
            title: {
              show: false,
            },
            //仪表盘详情，用于显示数据。
            detail: {
              show: false,
            },
            data: [
              {
                value: val,
              },
            ],
          },
        ],
      };
      let myChart = echarts.init(document.getElementById("red-early"));
      myChart.setOption(option);
    },
    yellowEarlyChartInit(val) {
      let option = {
        series: [
          {
            name: "预警处理",
            type: "gauge",
            center: ["50%", "80%"],
            radius: "155%",
            min: 0, //最小刻度
            max: 100, //最大刻度
            splitNumber: 10, //刻度数量
            startAngle: 180,
            endAngle: 0,
            axisLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: [[1, "#F5B600"]],
              },
            }, //仪表盘轴线
            axisLabel: {
              show: false,
            }, //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 5,
              lineStyle: {
                color: "#F5B600",
                width: 1,
              },
              length: -3,
            }, //刻度样式
            splitLine: {
              show: true,
              length: -10,
              lineStyle: {
                color: "#F5B600",
                width: 1,
              },
            }, //分隔线样式
          },
          {
            type: "gauge",
            radius: "115%",
            center: ["50%", "80%"],
            splitNumber: 0, //刻度数量
            startAngle: 180,
            endAngle: 0,
            axisLine: {
              show: true,
              lineStyle: {
                width: 15,
                color: [
                  [
                    val ,
                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "#F58B00",
                      },
                      {
                        offset: 1,
                        color: "#F5B600",
                      },
                    ]),
                  ],
                ],
              },
            },
            //分隔线样式。
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: true,
              length: "70%",
              width: "8%",
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "#F58B00",
                  },
                  {
                    offset: 1,
                    color: "#F5B600",
                  },
                ]),
              },
            },
            title: {
              show: false,
            },
            //仪表盘详情，用于显示数据。
            detail: {
              show: false,
            },
            data: [
              {
                value: val,
              },
            ],
          },
        ],
      };
      let myChart = echarts.init(document.getElementById("yellow-early"));
      myChart.setOption(option);
    },
    getEarlyList() {
      // this.redEarlyList = [
      //   { type: "申报清运服务频次与产废量预警", early: 10, rate: "90%" },
      //   { type: "企业端业务未按时做预警", early: 8, rate: "88%" },
      //   { type: "清运合同到期预警", early: 12, rate: "83%" },
      //   { type: "小产废量企业按产废袋数预警", early: 7, rate: "86%" },
      //   { type: "清运路线预警", early: 8, rate: "88%" },
      //   { type: "司机活跃度预警", early: 9, rate: "78%" },
      //   { type: "清运超时预警", early: 8, rate: "88%" },
      //   { type: "企业能耗和产废比预警", early: 8, rate: "88%" },
      // ];
      // this.yellowEarlyList = [
      //   { type: "申报清运服务频次与产废量预警", early: 85, rate: "98%" },
      //   { type: "企业端业务未按时做预警", early: 83, rate: "96%" },
      //   { type: "清运合同到期预警", early: 82, rate: "96%" },
      //   { type: "小产废量企业按产废袋数预警", early: 79, rate: "93%" },
      //   { type: "清运路线预警", early: 78, rate: "92%" },
      //   { type: "司机活跃度预警", early: 85, rate: "98%" },
      //   { type: "清运超时预警", early: 83, rate: "96%" },
      //   { type: "企业能耗和产废比预警", early: 82, rate: "96%" },
      // ];
      let paramred={
          warnLevel:"2",
      }
      this.$http.post(api.getEarlyList,paramred).then(res=>{
          this.redEarlyList =res.result.list;
      }).catch(error=>{

      });
      let paramyellow={
          warnLevel:"1",
      }
      this.$http.post(api.getEarlyList,paramyellow).then(res=>{
          this.yellowEarlyList =res.result.list;
      }).catch(error=>{

      });
    },
    getEnforcementList(){
        let param1 = {};
        param1.pageNum = 1;
        param1.pageSize = 8;
        param1.clueFlag="1";
        this.$http
            .post(api.queryComplaints, param1)
            .then((res) => {
                this.enforcementList = res.result.list;
            })
            .catch((error) => {});
    } ,
    getEnforcementDialogList(){
        let param1 = {};
        param1.pageNum = this.enforcementPage;
        param1.pageSize = this.enforcementSize;

        param1.clueFlag="1";
        this.$http
            .post(api.queryComplaints, param1)
            .then((res) => {
                this.enforcementDialogList = res.result.list;
            })
            .catch((error) => {});
    } ,

    getRubbishInfo() {
      let rubbishLael = {
        count: 0,
        unit: "吨",
      };
      let rubbishChartData = [];
      let param = {};
      this.$http
        .post(api.getRubbishInfo, param)
        .then((res) => {
          this.rubbishInfo.combustible = res.result.combustible;
          this.rubbishInfo.uncombustible = res.result.uncombustible;
          // this.rubbishInfo.available = res.result.available;
          rubbishLael.count = res.result.count;
          rubbishChartData = res.result.rubbishChartData;
          this.$nextTick(() => {
            this.rubbishChartInit(rubbishChartData, rubbishLael);
          });
          this.$refs.uncombustible.update(this.rubbishInfo.uncombustible);
          this.$refs.combustible.update(this.rubbishInfo.combustible);
        })
        .catch((error) => {});
    },
    rubbishChartInit(data, labelInfo) {
      let nameData = data.map((el) => {
        return el.name;
      });
      const middleIndex = Math.ceil(nameData.length / 2);
      const firstHalf = nameData.splice(0, middleIndex);
      const secondHalf = nameData.splice(-middleIndex);
      let colorData = [
        "#FE3718",
        "#ffc7c7",
        "#845959",
        "#ff7b61",
        "#D3A14A",
        "#d3ff85",
        "#278927",
        "#2ecc79",
        "#296d6a",
        "#3d9be2",
        "#385ebc",
        "#66a4ff",
        "#3282cc",
        "#8de4ff",
        "#2fa89a",
      ];
      let legendOption = {
        orient: "vertical",
        top: "center",
        itemWidth: 8, // 设置宽度
        itemHeight: 8, // 设置高度
        itemGap: 8, // 设置间距
        textStyle: {
          align: "left",
          verticalAlign: "middle",
          rich: {
            name: {
              color: "#9BB1C6",
              fontSize: 16,
            },
            rate: {
              color: "#E9F5FF",
              padding: [0, 0, 0, 8],
              fontSize: 16,
              fontWeight: "bold",
            },
          },
        },
        formatter: (name) => {
          if (data.length) {
            const item = data.filter((item) => item.name === name)[0];
            return `{name|${name}}{rate| ${item.value}%}`;
          }
        },
      };
      let option = {
        color: colorData,
        tooltip: {
          show: true,
          className: "map-tootip",
          formatter: (params) => {
            return `<div class="rubbish-content"><div>${params.seriesName}</div><div>${params.marker}<p>${params.data.name}</p><span>${params.data.value}%</span></div></div>`;
          },
          textStyle: {
            color: "#edf4fe",
            fontSize: 16,
          },
        },
        grid: {
          top: "15%",
          left: 0,
          right: "1%",
          bottom: 5,
          containLabel: true,
        },
        legend: [
          {
            left: 0,
            data: secondHalf,
            align: "left",
            ...legendOption,
          },
          {
            right: 0,
            data: firstHalf,
            align: "left",
            ...legendOption,
          },
        ],
        series: [
          {
            name: "垃圾分类处理",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["40%", "65%"],
            label: {
              normal: {
                show: true,
                position: "center",
                formatter: `{value|${labelInfo.count}}\n{label|${labelInfo.unit}}`,
                rich: {
                  value: {
                    align: "center",
                    verticalAlign: "middle",
                    color: "#E7EAF2",
                    fontSize: 26,
                    fontWeight: "bold",
                  },
                  label: {
                    align: "center",
                    verticalAlign: "middle",
                    color: "#9BB1C6",
                    fontSize: 16,
                  },
                },
              },
            },
            labelLine: {
              show: false,
              length: 0,
              length2: 0,
            },
            data: data,
          },
        ],
      };
      let myChart = echarts.init(document.getElementById("rubbish-chart"));
      myChart.setOption(option);
    },
    checkBoardStatus(val,name='boardStatus') {
      this[name] = val;
      if(name === 'boardStatus1' && (val==='1' || val==='2')){
        debugger
        this.getLllegalInfo(val)
      }
    },
    checkEarlyStatus(val) {
      this.earlyStatus = val;
    },
    checkEarlyDialog() {
      // 可以通过earlyStatus 判断是红色， 还是黄色预警
      let param = {};
      if (this.earlyStatus == "1") {
        param = {
          warnLevel: "2",
        };
      } else {
        param = {
          warnLevel: "1",
        };
      }
      this.$http
        .post(api.getEarlyList, param)
        .then((res) => {
          this.earlyDialogList = res.result.list;
          this.earlyDialogPage = res.result.pageNum;
          this.earlyDialogSize = res.result.pageSize;
          this.earlyDialogListsize = res.result.total;
        })
        .catch((error) => {});

      this.earlyVisible = true;
    },
    // 实时看板-固废走向-每页条数变化
    handleGarbageSizeChange(val) {
      this.garbageSize = val;
      //页码修改
      let param = {};
      param.pageNum = this.garbagePage;
      param.pageSize = this.garbageSize;
      this.$http
        .post(api.getGarbageList, param)
        .then((res) => {
          this.garbageDialogList = res.result.list;
          this.garbageDialogListSize = res.result.total;
        })
        .catch((error) => {});
    },
    // 实时看板-固废走向-页数变化
    handleGarbageCurrentChange(val) {
      this.garbagePage = val;
      //页码修改
      let param = {};
      param.pageNum = this.garbagePage;
      param.pageSize = this.garbageSize;
      this.$http
        .post(api.getGarbageList, param)
        .then((res) => {
          this.garbageDialogList = res.result.list;
          this.garbageDialogListSize = res.result.total;
        })
        .catch((error) => {});
    },
    // 实时看板-联合执法-每页条数变化
    handleEnforcementSizeChange(val) {
      this.enforcementSize = val;
      this.getEnforcementDialogList();
    },
    // 实时看板-联合执法-页数变化
    handleEnforcementCurrentChange(val) {
      this.enforcementPage = val;
      this.getEnforcementDialogList();
    },
    // 实时看板-预警明细-每页条数变化
    handleDetailSizeChange(val) {
      this.detailSize = val;
      this.getTotal();
    },
    // 实时看板-预警明细-页数变化
    handleDetailCurrentChange(val) {
      this.detailPage = val;
      this.getTotal();
    },
    // 预警列表-每页条数变化
    handleEarlySizeChange(val) {
      this.earlyDialogSize = val;
      this.getTotal();
    },
    // 预警列表-页数变化
    handleEarlyCurrentChange(val) {
      this.earlyDialogPage = val;
      this.getTotal();
    },
    // 企业列表-每页条数变化
    handleCompanySizeChange(val) {
      this.companySize = val;
    },
    // 企业列表-页数变化
    handleCompanyCurrentChange(val) {
      this.companyPage = val;
    },
    // 数字跳动
    countReady1(instance) {
      this.countArr.push(instance);
      clearTimeout(this.countTimer);
      this.countTimer = setTimeout(() => {
        if (this.countArr.length > 11) {
          this.countRock();
        }
      }, 10000);
    },
    countRock() {
      this.countArr.forEach((instance) => {
        instance.reset();
        instance.start();
      });
      let timer = setTimeout(() => {
        clearTimeout(timer);
        this.countRock();
      }, 20000);
    },
  },
};
</script>
<style lang="less" scoped>
.ep-box {
  width: 1920px;
  height: 1080px;
  padding: 3px 30px 30px;
  box-sizing: border-box;
  background: url("../assets/images/icon17.png") no-repeat center;
  .headline {
    position: relative;
    padding: 10px 0;
    .text {
      line-height: 60px;
      text-align: center;
      font-size: 50px;
      font-family: "BigRuixian";
      color: #f3f6ff;
    }
    .date {
      position: absolute;
      width: 180px;
      top: 10px;
      left: 0;
      color: #9bb1c6;
      > div {
        line-height: 36px;
        text-align: center;
        font-size: 30px;
      }
      p {
        margin-top: 2px;
        text-align: center;
        font-size: 16px;
        span {
          padding-right: 15px;
        }
      }
    }
  }
  .container {
    display: flex;
    align-items: flex-start;

    margin-top: 30px;
    .left,
    .right {
      flex: 0 0 auto;
      width: 489px;
    }
    .center {
      flex: 1;
      margin: 0 42px;
      height: 935px;
    }
    .left {
      .company {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 10px 30px 0;
        height: 239px;
        margin-bottom: 23px;
        background: url("../assets/images/icon5.png") no-repeat left bottom;
        background-size: 489px 212px;
        .highqualified,
        .qualified,
        .unqualified {
          flex: 0 0 auto;
          width: 123px;
          text-align: center;
          p {
            color: #9bb1c6;
            font-size: 20px;
            font-weight: bold;
            span {
              padding-right: 3px;
              color: #e7eaf2;
              font-size: 32px;
              font-weight: bold;
            }
            i {
              font-weight: normal;
              font-style: normal;
            }
          }
        }
        #highqualified-chart,
        #qualified-chart,
        #unqualified-chart {
          width: 123px;
          height: 123px;
          margin-bottom: 15px;
        }
      }
      .lllegal {
        height: 198px;
        margin-bottom: 21px;
        padding: 15px 30px;
        background: url("../assets/images/icon5.png") no-repeat left bottom;
        background-size: 489px 212px;
        #lllegal-chart,#lllegal-chart1 {
          height: 198px;
        }
      }
      .waste {
        height: 276px;
        background: url("../assets/images/icon5.png") no-repeat left bottom;
        background-size: 489px 212px;
        .waste-info {
          display: flex;
          align-items: center;
          padding: 10px 30px 10px 40px;
          .info-item1,
          .info-item2 {
            flex: 0 0 auto;
            width: 140px;
            display: flex;
            align-items: center;
            img {
              flex: 0 0 auto;
              width: 39px;
              height: auto;
              vertical-align: middle;
            }
            div {
              flex: 1;
              margin-left: 8px;
              color: #c0e7ff;
              p {
                margin-top: 4px;
                span {
                  font-weight: bold;
                  font-size: 24px;
                  color: #e7eaf2;
                }
              }
            }
          }
          .info-item3 {
            flex: 1;
            display: flex;
            align-items: center;
            img {
              flex: 0 0 auto;
              width: 39px;
              height: auto;
              vertical-align: middle;
            }
            div {
              flex: 1;
              margin-left: 8px;
              color: #c0e7ff;
              p {
                margin-top: 4px;
                span {
                  font-weight: bold;
                  font-size: 24px;
                  color: #e7eaf2;
                }
              }
            }
          }
        }

      }
    }
  }
  .center {
    .total-info {
      display: flex;
      align-items: center;
      .info-item {
        flex: 1;
        display: flex;
        align-items: center;
        img {
          flex: 0 0 auto;
          width: 60px;
          height: auto;
          vertical-align: middle;
        }
        div {
          flex: 1;
          margin-left: 5px;
          color: #9bb1c6;
          font-size: 20px;
          font-weight: bold;
          p {
            margin-top: 10px;
            color: #f5b600;
            span {
              padding-right: 3px;
              font-weight: bold;
              font-size: 32px;
              font-family: "LCD2-Ultra";
            }
          }
        }
      }
    }
    .map-container {
      height: 610px;
      position: relative;
      #map {
        height: 610px;
      }
      .map-switch {
        position: absolute;
        top: 100px;
        left: 20px;
        /deep/ .el-switch__label {
          color: #edf4fe !important;
          span {
            font-size: 16px !important;
          }
        }
        /deep/ .el-switch__core {
          width: 47px !important;
          background: rgba(32, 93, 112, 0.6);
          border: 1px solid #0e8c74;
          &:after {
            width: 24px;
            border-radius: 10px;
            background-color: #05303a;
          }
        }
        /deep/ .el-switch.is-checked .el-switch__core {
          &:after {
            background-color: rgba(52, 222, 197, 1);
          }
          &::after {
            margin-left: -25px;
          }
        }
      }
      ul {
        position: absolute;
        top: 160px;
        left: 20px;
        li {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          p {
            flex: 0 0 auto;
            width: 23px;
            height: 23px;
          }
          .p1 {
            background: url("../assets/images/icon19.png") no-repeat center;
            background-size: 23px auto;
          }
          .p2 {
            background: url("../assets/images/icon18.png") no-repeat center;
            background-size: 56px 40px;
          }
          .p3 {
            background: url("../assets/images/icon20.png") no-repeat 2px center;
            background-size: 23px 23px;
          }
          .p4 {
            height: 3px;
            background: #f5b600;
            border-radius: 1px;
          }
          .p5 {
            background: url("../assets/images/icon30.png") no-repeat center;
            background-size: 23px 23px;
          }
          span {
            flex: 1;
            margin-left: 10px;
            color: #edf4fe;
          }
        }
      }
    }

    .center-title {
      display: flex;
      align-items: flex-start;
      height: 44px;
      padding: 0 34px;
      background: url("../assets/images/icon6.png") no-repeat left center;
      background-size: 798px 34px;
      p {
        flex: 1;
        font-size: 24px;
        font-weight: 600;
        color: #dcf3ff;
      }
      div {
        flex: 0 0 auto;
        align-self: flex-end;
        display: flex;
        span {
          flex: 0 0 auto;
          width: 96px;
          line-height: 26px;
          margin-left: 10px;
          background: rgba(32, 42, 45);
          color: #cfe9ff;
          text-align: center;
          cursor: pointer;
          &.active {
            background: rgba(22, 137, 126);
            color: #f8fffe;
          }
        }
      }
    }
    .board {
      height: 173px;
      padding: 10px 34px 20px;
      background: url("../assets/images/icon7.png") no-repeat center bottom;
      background-size: 798px 211px;
      .board-header {
        display: flex;
        align-items: center;
        line-height: 45px;
        background: rgba(41, 165, 165, 0.3);
        opacity: 1;
        text-align: center;
        color: #cfe9ff;
      }
      .board-wrap {
        height: 128px;
        overflow: hidden;
      }
      ul {
        width: 730px;
        li {
          display: flex;
          align-items: center;
          width: 730px;
          line-height: 31px;
          border-bottom: 1px solid #16474f;
          text-align: center;
          color: #cfe9ff;
          cursor: pointer;
          &:hover {
            border-bottom: 1px solid rgba(41, 165, 165, 0.2);
            background: rgba(41, 165, 165, 0.2);
          }
        }
      }
      p {
        flex: 0 0 auto;
        width: 150px;
      }
      label {
        flex: 1;
        padding: 0 5px;
        text-align: left;
        cursor: pointer;
      }
      .board-mode {
        flex: 0 0 auto;
        width: 100px;
      }
      .boardt-mode {
        flex: 0 0 auto;
        width: 200px;
      }
      .board-remove {
        flex: 0 0 auto;
        width: 100px;
        padding: 0 5px;
      }
      .board-garbage {
        flex: 0 0 auto;
        width: 100px;
      }
      .board-profit {
        flex: 0 0 auto;
        width: 100px;
        padding: 0 5px;
      }
    }
  }
  .right {
    .early-warn {
      display: flex;
      justify-content: space-between;
      height: 193px;
      padding: 10px 20px;
      margin-bottom: 12px;
      .early-warn-info {
        flex: 0 0 auto;
        width: 190px;
        #red-early,
        #yellow-early {
          height: 115px;
        }
        p {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 3px;
          label {
            flex: 0 0 auto;
            width: 80px;
            color: #e9f5ff;
          }
          span {
            flex: 0 0 auto;
            color: #e7eaf2;
            font-weight: bold;
            font-size: 22px;
            i {
              font-size: 16px;
              font-style: normal;
              font-weight: normal;
            }
          }
        }
      }
    }
    .early-title {
      display: flex;
      align-items: center;
      line-height: 26px;
      margin-bottom: 12px;
      padding: 0 23px 0 44px;
      background: url("../assets/images/icon16.png") no-repeat 21px center;
      background-size: 20px 14px;
      p {
        flex: 1;
        font-size: 19px;
        color: #e7eaf2;
      }
      div {
        flex: 0 0 auto;
        align-self: flex-end;
        display: flex;
        span {
          flex: 0 0 auto;
          width: 96px;
          line-height: 26px;
          margin-left: 10px;
          background: rgba(32, 42, 45);
          color: #cfe9ff;
          text-align: center;
          cursor: pointer;
          &.active {
            background: rgba(22, 137, 126);
            color: #f8fffe;
          }
        }
      }
    }
    .early-list {
      height: 222px;
      margin-bottom: 22px;
      padding: 0 21px 0 23px;
      background: url("../assets/images/icon5.png") no-repeat center bottom;
      background-size: 489px 212px;
      .early-header {
        display: flex;
        align-items: center;
        line-height: 44px;
        background: rgba(41, 165, 165, 0.3);
        text-align: center;
        color: #cfe9ff;
      }
      .early-wrap {
        height: 155px;
        overflow: hidden;
      }
      ul {
        li {
          display: flex;
          align-items: center;
          line-height: 30px;
          border-bottom: 1px solid #16474f;
          text-align: center;
          color: #cfe9ff;
          cursor: pointer;
          &:hover {
            border-bottom: 1px solid rgba(41, 165, 165, 0.2);
            background: rgba(41, 165, 165, 0.2);
          }
        }
      }
      i {
        flex: 0 0 auto;
        width: 55px;
        font-style: normal;
      }
      label {
        flex: 0 0 auto;
        width: 237px;
        padding: 0 5px;
        text-align: left;
        cursor: pointer;
      }
      span {
        flex: 0 0 auto;
        width: 65px;
      }
      p {
        flex: 0 0 auto;
        width: 65px;
        padding: 0 5px;
      }
    }
    .rubbish {
      height: 336px;
      padding: 0 21px 0 23px;
      background: url("../assets/images/icon5.png") no-repeat center bottom;
      background-size: 489px 212px;
      #rubbish-chart {
        height: 230px;
      }
      .rubbish-info {
        display: flex;
        align-items: center;
        .info-item {
          flex: 1;
          display: flex;
          align-items: center;
          img {
            flex: 0 0 auto;
            width: auto;
            height: 47px;
            vertical-align: middle;
          }
          div {
            flex: 1;
            margin-left: 8px;
            color: #c0e7ff;
            p {
              margin-top: 4px;
              span {
                font-weight: bold;
                font-size: 24px;
                color: #e7eaf2;
              }
            }
          }
        }
      }
    }
  }
  .mantle {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10000000;
    background: rgba(0, 2, 7, 0.67);
  }
  .company-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1143px;
    height: 749px;
    transform: translate(-50%, -50%);
    z-index: 10000001;
    background: url("../assets/images/icon21.png") no-repeat center;
    background-size: 1143px 749px;
    .dialog-title {
      display: flex;
      align-items: center;
      line-height: 65px;
      padding-left: 72px;
      p {
        flex: 1;
        text-align: center;
        font-size: 34px;
        font-weight: bold;
        color: #f3f6ff;
      }
      span {
        flex: 0 0 auto;
        width: 72px;
        height: 65px;
        background: url("../assets/images/icon22.png") no-repeat 10px 35px;
        background-size: 18px 18px;
        cursor: pointer;
      }
    }
    .dialog-list {
      padding: 46px 72px 20px;
      div {
        display: flex;
        align-items: center;
        line-height: 55px;
        background: rgba(41, 165, 165, 0.3);
        text-align: center;
        color: #cfe9ff;
      }
      ul {
        height: 448px;
        overflow-x: hidden;
        overflow-y: auto;
        li {
          display: flex;
          align-items: center;
          width: 999px;
          line-height: 55px;
          border-bottom: 1px solid #217f7d;
          text-align: center;
          color: #cfe9ff;
          cursor: pointer;
          &:hover {
            border-bottom: 1px solid rgba(41, 165, 165, 0.2);
            background: rgba(41, 165, 165, 0.2);
          }
        }
      }
    }
    .dialog-list-garbage {
      label {
        flex: 0 0 auto;
        width: 160px;
        padding: 0 5px;
        cursor: pointer;
      }
      span {
        flex: 0 0 auto;
        width: 120px;
        padding: 0 5px;
      }
      p {
        flex: 1;
        padding: 0 5px;
      }
    }
    .dialog-list-enforcement {
      label {
        flex: 0 0 auto;
        width: 145px;
        padding: 0 5px;
        cursor: pointer;
      }
      span {
        flex: 0 0 auto;
        width: 120px;
        padding: 0 5px;
      }
      p {
        flex: 1;
        padding: 0 5px;
      }
    }
    .dialog-list-detail {
      label {
        flex: 0 0 auto;
        width: 145px;
        padding: 0 5px;
        cursor: pointer;
      }
      span {
        flex: 0 0 auto;
        width: 120px;
        padding: 0 5px;
      }
      p {
        flex: 1;
        padding: 0 5px;
      }
    }

    .dialog-list-early {
      i {
        flex: 0 0 auto;
        width: 120px;
        font-style: normal;
      }
      label {
        flex: 0 0 auto;
        width: 499px;
        padding: 0 10px;
        text-align: left;
        cursor: pointer;
      }
      span {
        flex: 0 0 auto;
        width: 170px;
      }
      p {
        flex: 0 0 auto;
        width: 170px;
        padding: 0 10px;
      }
    }
    .dialog-list-com {
      label {
        flex: 0 0 auto;
        width: 100px;
        cursor: pointer;
      }
      span {
        flex: 0 0 auto;
        width: 599px;
        padding: 0 10px;
        text-align: left;
      }
      p {
        flex: 0 0 auto;
        width: 280px;
      }
    }
    .dialog-vedio {
      height: 580px;
      padding: 66px 100px 20px;
      #vedio {
        width: 100%;
        height: auto;
      }
    }
    .dialog-page {
      padding: 12px 72px;
      text-align: center;
      /deep/ .el-pagination__total {
        color: #b3e0ff;
      }
      /deep/ .el-input {
        background: rgba(25, 94, 92, 0.3);
        color: #b3e0ff;
      }
      /deep/ .el-input__inner {
        background: rgba(25, 94, 92, 0.3);
        border-color: rgba(25, 94, 92, 0.3);
        color: #b3e0ff;
        &:hover {
          border-color: rgba(25, 94, 92, 0.3);
        }
      }

      /deep/ .btn-prev {
        background: rgba(25, 94, 92, 0.3);
      }
      /deep/ .btn-next {
        margin-left: 10px;
        background: rgba(25, 94, 92, 0.3);
      }
      /deep/ .el-icon {
        color: #b3e0ff;
      }
      /deep/ .more {
        margin-left: 10px;
        background: rgba(25, 94, 92, 0.3);
      }
      /deep/ .number {
        margin-left: 10px;
        background: rgba(25, 94, 92, 0.3);
        color: #b3f1ff;
        &.active {
          background: linear-gradient(180deg, #a85f00 0%, #c2940d 100%);
        }
      }
      /deep/ .el-pagination__jump {
        color: #b3f1ff;
      }
    }
  }

  .waste-list {
    padding: 10px 30px 0 40px;
    .waste-header {
      display: flex;
      align-items: center;
      line-height: 30px;
      margin-bottom: 5px;
      background: rgba(41, 165, 165, 0.3);
      opacity: 1;
      border-radius: 1px;
      text-align: center;
      color: #cfe9ff;
      i {
        flex: 0 0 auto;
        width: 80px;
        font-style: normal;
      }
      label {
        flex: 0 0 auto;
        width: 139px;
        cursor: pointer;
      }
      span {
        flex: 0 0 auto;
        width: 100px;
      }
      p {
        flex: 0 0 auto;
        width: 100px;
      }
    }
    .waste-wrap {
      height: 135px;
      padding: 1px 0;
      overflow: hidden;
    }
    ul {
      li {
        display: flex;
        align-items: center;
        line-height: 28px;
        margin-top: 4px;
        border: 1px solid #16474f;
        border-radius: 1px;
        text-align: center;
        color: #cfe9ff;
        cursor: pointer;
        i {
          flex: 0 0 auto;
          width: 80px;
          font-style: normal;
        }
        label {
          flex: 0 0 auto;
          width: 139px;
          cursor: pointer;
        }
        span {
          flex: 0 0 auto;
          width: 100px;
        }
        p {
          flex: 0 0 auto;
          width: 100px;
        }
        &:hover {
          border: 1px solid #e8ca2c;
          background: rgba(232, 202, 44, 0.1);
        }
      }
      li:first-child {
        margin-top: 0;
      }
    }
  }


  .garbage-info-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1692px;
    height: 948px;
    transform: translate(-50%, -50%);
    z-index: 10000001;
    background: url("../assets/images/icon21.png") no-repeat center;
    background-size: 1692px 948px;
    .dialog-title {
      display: flex;
      align-items: center;
      line-height: 65px;
      padding-left: 72px;
      p {
        flex: 1;
        text-align: center;
        font-size: 34px;
        font-weight: bold;
        color: #f3f6ff;
      }
      span {
        flex: 0 0 auto;
        width: 72px;
        height: 65px;
        background: url("../assets/images/icon22.png") no-repeat 10px 35px;
        background-size: 18px 18px;
        cursor: pointer;
      }
    }
    .info-content {
      width: 1552px;
      height: 802px;
      margin: 30px auto 0;
      padding-right: 10px;
      overflow: auto;
      .info-title {
        line-height: 28px;
        padding-left: 26px;
        background: url("../assets/images/icon16.png") no-repeat left center;
        font-size: 20px;
        color: #e1fbff;
      }
      ul {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin: 30px 0 40px;
        font-size: 16px;
        color: #fff;
        li {
          flex: 0 0 auto;
          width: 33.3%;
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          span {
            flex: 0 0 auto;
            width: 140px;
            text-align: right;
          }
          p {
            flex: 1;
            height: 36px;
            line-height: 34px;
            padding: 0 10px;
            border: 1px solid #1b6864;
            border-radius: 5px;
            box-sizing: border-box;
            background: rgba(56, 114, 81, 0.2);
          }
          &.photos {
            width: 100%;
            span {
              align-self: flex-start;
              padding-top: 8px;
            }
            div {
              flex: 1;
              display: flex;
              align-items: center;
              img {
                width: 96px;
                height: 67px;
                margin-right: 15px;
                margin-bottom: 10px;
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
  }
  ::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }

  ::-webkit-scrollbar-thumb {
    background: #16474f !important;
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #16474f !important;
  }
}
</style>
<style lang="less">
.el-select-dropdown {
  border: 1px solid #217f7d !important;
  background: rgba(25, 94, 92) !important;
}
.el-select-dropdown__item {
  height: 28px !important;
  line-height: 28px !important;
  color: #b3e0ff !important;
  &.hover {
    background: rgba(22, 137, 126) !important;
    color: #f8fffe !important;
  }
}
.popper__arrow {
  border-bottom-color: #217f7d !important;
}
.popper__arrow::after {
  border-bottom-color: #217f7d !important;
}
.map-tootip {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
.map-storage {
  min-width: 140px;
  line-height: 34px;
  padding: 0 8px;
  border: 1px solid #66c7d1;
  background: #0a1b26;
  text-align: center;
  font-size: 16px;
  color: #edf4fe;
}
.map-line {
  width: 260px;
  padding: 6px 15px 10px;
  box-sizing: border-box;
  border: 1px solid #66c7d1;
  background: #0a1b26;
  border-radius: 6px;
  color: #edf4fe;
  div {
    line-height: 32px;
    border-bottom: 2px solid #3aa0a0;
    font-size: 18px;
    font-weight: bold;
  }
  ul {
    margin-top: 5px;
    overflow: hidden;
    li {
      display: flex;
      align-items: flex-start;
      line-height: 22px;
      span {
        flex: 0 0 auto;
        width: 70px;
      }
      label {
        margin-left: 10px;
        flex: 1;
      }
    }
  }
}
.map-map {
  width: 330px;
  height: 200px;
  padding: 20px 55px 0 45px;
  box-sizing: border-box;
  background: url("../assets/images/icon24.png") no-repeat center;
  background-size: 380px 232px;
  color: #e7eaf2;
  cursor: pointer;
  div {
    line-height: 36px;
    margin-bottom: 8px;
    font-size: 22px;
    font-weight: bold;
  }
  p {
    display: flex;
    align-items: center;
    line-height: 30px;
    label {
      flex: 0 0 auto;
      width: 120px;
      font-size: 18px;
      cursor: pointer;
    }
    span {
      flex: 1;
      text-align: right;
      font-size: 20px;
      font-weight: bold;
    }
    i {
      font-style: normal;
      padding-left: 3px;
      font-size: 18px;
    }
  }
}
.rubbish-content {
  padding: 10px 15px !important;
  border: 1px solid #66c7d1 !important;
  background: #0a1b26 !important;
  border-radius: 5px;
  div {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    span {
      flex: 0 0 auto;
    }
    p {
      flex: 0 0 auto;
      min-width: 60px;
      margin: 0 15px 0 5px;
    }
  }
}
.el-tooltip__popper.is-dark {
  padding: 15px;
  background: #0a1b26;
  border: 1px solid #66c7d1;
  max-width: 600px;

  .tooltip-info {
    max-width: 600px;
    ul {
      li {
        display: flex;
        align-items: flex-start;
        padding: 5px 0;
        line-height: 24px;
        color: #edf4fe;
        font-size: 14px;
        label {
          flex: 0 0 auto;
          width: 120px;
        }
        p {
          flex: 1;
        }
      }
    }
  }
}

.detail-dialog{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1143px;
  height: 401px;
  background: url("../assets/images/dialog-bg.png") no-repeat center;
  background-size: 1143px 401px;
  transform: translate(-50%, -50%);
  z-index: 10000003;
}

.detail-mask{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10000002;
  background: rgba(0, 2, 7, 0.67);
  .dialog-title {
    display: flex;
    align-items: center;
    line-height: 65px;
    padding-left: 72px;
    p {
      flex: 1;
      text-align: center;
      font-size: 34px;
      font-weight: bold;
      color: #f3f6ff;
    }
    span {
      flex: 0 0 auto;
      width: 72px;
      height: 65px;
      background: url("../assets/images/icon22.png") no-repeat 10px 35px;
      background-size: 18px 18px;
      cursor: pointer;
    }
  }
  .dialog-list {
    padding: 46px 72px 20px;
  }

}

.title {
  width: 481px;
  height: 46px;
  padding-left: 34px;
  background: url("../assets/images/icon4.png") no-repeat left bottom;
  background-size: 481px 34px;
  font-size: 24px;
  font-weight: 600;
  color: #dcf3ff;
  display: flex;
  align-items: flex-start;
  p {
    flex: 1;
    font-size: 24px;
    font-weight: 600;
    color: #dcf3ff;
  }
  & > div {
    font-size: 14px;
    flex: 0 0 auto;
    align-self: flex-end;
    display: flex;
    span {
      flex: 0 0 auto;
      width: 96px;
      line-height: 26px;
      margin-left: 10px;
      background: rgba(32, 42, 45);
      color: #cfe9ff;
      text-align: center;
      cursor: pointer;
      &.active {
        background: rgba(22, 137, 126);
        color: #f8fffe;
      }
    }
  }
}


.el-tooltip__popper[x-placement^="top"] .popper__arrow {
  border-top-color: #0a1b26;
  &::after {
    border-bottom-color: #0a1b26;
  }
}
</style>
